HTML中下拉菜单的实现

我正在使用HTML和CSS创建一个水平导航栏。这项工作简单易行。然后，我决定将下拉菜单添加到导航栏上最初显示的每个链接中

作为一个示例分配，我创建了一个带有三个链接“Dropdown1”、“Dropdown2”、“Dropdown3”的水平导航栏，然后将下拉菜单添加到这三个链接中的每一个。每个下拉菜单只需包含三个附加链接。（总共3x3=9个下拉链接。这些下拉链接编号为link01到link09）

导航栏链接的屏幕截图

问题是所有下拉链接都与每个导航栏链接关联。我得到的输出与

当Dropdown1和Dropdown3悬停时，同样适用。理想情况下，将鼠标悬停在下拉列表1上只能显示Link01、Link02和Link03。同样，将鼠标悬停在下拉列表2上必须仅显示Link04、Link05和Link06等

我写的HTML代码是

<ul>
<div class="dropdown">
<li>

<a href="#"> Dropdown1</a> 
<div class ="dropdown-content">
<a href="#">Link01</a><!-- actual content of the dropdown will consists of hyperlinks -->
<a href="#">Link02</a>
<a href="#">Link03</a>
</div>

</li>

<li> 
<a href="#"> Dropdown2</a> 
<div class ="dropdown-content">
<a href="#">Link04</a><!-- actual content of the dropdown will consists of hyperlinks -->
<a href="#">Link05</a>
<a href="#">Link06</a>
</div>
</li>
<li> 
<a href="#"> Dropdown3</a> 
<div class ="dropdown-content">
<a href="#">Link07</a><!-- actual content of the dropdown will consists of hyperlinks -->
<a href="#">Link08</a>
<a href="#">Link09</a>
</div>
</li>
</div> <!--closing the dropdown container-->

---

有什么问题吗？

首先，你的代码错了。它不是有效的HTML。当你想问一些问题时，请在你想任何事情之前用W3C验证器验证你的代码

其次，尝试使用Snippet特性

最后，检查解决方案的CSS部分

*{margin:0；padding:0；列表样式：无；字体系列：“Segoe UI”；行高：1；}
a{color:#fff；文本装饰：无；显示：块；}
.菜单{显示：内联块；背景色：#999；}
.menu:：在{content:”；显示：块；清除：两者；}
.menu>li{float:左；位置：相对；}
.menu LIA{padding:15px；}
.menu li:hover>a{背景色：#333；}
.menu ul{显示：无；背景色：#999；左：0；右：0；}
.menu li:hover ul{显示：块；位置：绝对；}

我投票结束这个问题，因为我认为它更适合CSS用于生成当前输出的位置？