在HTML中实现下拉菜单

Question

我正在使用HTML和CSS创建水平导航栏。这项工作很简单，轻松完成。然后我决定将下拉菜单包含在导航栏上最初显示的每个链接上。

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

导航栏链接的屏幕截图

问题是所有下拉链接都与每个导航栏链接相关联。我得到类似于

的输出

Dropdown1和Dropdown3悬停时同样适用。理想情况下，将鼠标悬停在Dropdown1上必须只显示Link01，Link02和Link03。同样，将鼠标悬停在Dropdown2上必须只显示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-->

有什么问题？

Answer 1

首先，你的代码是错误的。它不是有效的HTML。在您想要问某些事情时，请在使用W3C Validator之前验证您的代码。

其次，请尝试使用代码段功能。

最后，检查CSS部分以找到解决方案。

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; line-height: 1;}
a {color: #fff; text-decoration: none; display: block;}
.menu {display: inline-block; background-color: #999;}
.menu::after {content: " "; display: block; clear: both;}
.menu > li {float: left; position: relative;}
.menu li a {padding: 15px;}
.menu li:hover > a {background-color: #333;}
.menu ul {display: none; background-color: #999; left: 0; right: 0;}
.menu li:hover ul {display: block; position: absolute;}

<ul class="menu">
  <li>
    <a href="">Dropdown 1</a>
    <ul>
      <li><a href="">Link 01</a></li>
      <li><a href="">Link 02</a></li>
      <li><a href="">Link 03</a></li>
    </ul>
  </li>
  <li>
    <a href="">Dropdown 2</a>
    <ul>
      <li><a href="">Link 01</a></li>
      <li><a href="">Link 02</a></li>
      <li><a href="">Link 03</a></li>
    </ul>
  </li>
  <li>
    <a href="">Dropdown 3</a>
    <ul>
      <li><a href="">Link 01</a></li>
      <li><a href="">Link 02</a></li>
      <li><a href="">Link 03</a></li>
    </ul>
  </li>
</ul>

如果您希望显示所有9个链接，可以使用以下内容：

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; line-height: 1;}
a {color: #fff; text-decoration: none; display: block;}
.menu {display: inline-block; background-color: #999; position: relative;}
.menu::after {content: " "; display: block; clear: both;}
.menu > li {float: left;}
.menu li a {padding: 15px;}
.menu li:hover > a {background-color: #333;}
.menu ul {display: none; background-color: #999; left: 0; right: 0; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; column-count: 3;}
.menu li:hover ul {display: block; position: absolute;}

<ul class="menu">
  <li>
    <a href="">Dropdown 1</a>
    <ul>
      <li><a href="">Link 1-01</a></li>
      <li><a href="">Link 1-02</a></li>
      <li><a href="">Link 1-03</a></li>
      <li><a href="">Link 1-04</a></li>
      <li><a href="">Link 1-05</a></li>
      <li><a href="">Link 1-06</a></li>
      <li><a href="">Link 1-07</a></li>
      <li><a href="">Link 1-08</a></li>
      <li><a href="">Link 1-09</a></li>
    </ul>
  </li>
  <li>
    <a href="">Dropdown 2</a>
    <ul>
      <li><a href="">Link 2-01</a></li>
      <li><a href="">Link 2-02</a></li>
      <li><a href="">Link 2-03</a></li>
      <li><a href="">Link 2-04</a></li>
      <li><a href="">Link 2-05</a></li>
      <li><a href="">Link 2-06</a></li>
      <li><a href="">Link 2-07</a></li>
      <li><a href="">Link 2-08</a></li>
      <li><a href="">Link 2-09</a></li>
    </ul>
  </li>
  <li>
    <a href="">Dropdown 3</a>
    <ul>
      <li><a href="">Link 3-01</a></li>
      <li><a href="">Link 3-02</a></li>
      <li><a href="">Link 3-03</a></li>
      <li><a href="">Link 3-04</a></li>
      <li><a href="">Link 3-05</a></li>
      <li><a href="">Link 3-06</a></li>
      <li><a href="">Link 3-07</a></li>
      <li><a href="">Link 3-08</a></li>
      <li><a href="">Link 3-09</a></li>
    </ul>
  </li>
</ul>

上面已经使用了CSS3列。