Question

我想显示两个下拉菜单，但是我遇到了一些问题。

我无法使第二个下拉菜单正常工作。第一个工作正常，但是当我指定第二个时，该功能块将无法工作/更改。

CSS或HTML是否有冲突？

如何处理它，以便显示第二个下拉菜单？

    body {
    	margin: 0;
        padding: 0
    }

    /*first navigation menu*/
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }
    /*end first navigation menu*/

    /*second navigation menu*/
    .nav2 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: deepskyblue;
    }

    .nav2 li {
        float: left;
    }

    .nav2 li a, .dropbtn2 {
        display: inline-block;
        color: yellow;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .nav2 li a:hover, .dropdown2:hover .dropbtn2 {
        background-color: deeppink;
    }

    li.dropdown2 {
        display: inline-block;
    }

    .dropdown2-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown2-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown2-content a:hover {background-color: deeppink}

    .dropdown2:hover .dropdown2-content {
        display: block;
    }

  <html>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    &nbsp;
    <div class="nav2">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown2">
        <a href="javascript:void(0)" class="dropbtn2">Dropdown</a>
        <div class="dropdown2-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    </div>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

    </body>
    </html>

Answer 1

好的，请看下面的工作示例。我所做的只是通过将“下拉列表行为”与每个下拉列表的特定样式分开来清理CSS代码。您第一个下拉菜单的原始CSS与dropdown2的CSS混乱。

body {
    	margin: 0;
        padding: 0
    }

    /*dropdown behavior*/
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    /*end dropdown behavior*/
    
    /*end first navigation menu*/

    /*first navigation menu*/

    li a, .dropbtn1 {
        color: white;
    }

    li a:hover, .dropdown1:hover .dropbtn1 {
        background-color: red;
    }

    li.dropdown1 {
        display: inline-block;
    }

    .dropdown1-content a:hover {background-color: #f1f1f1}

    /*end first navigation menu*/

    /*second navigation menu*/
    
    .nav2 ul {
        background-color: deepskyblue;
    }
    
    .nav2 li a, .dropbtn2 {
      color: yellow;
    }

    .nav2 li a:hover, .dropdown2:hover .dropbtn2 {
      background-color: deeppink;
    }

    .dropdown2-content a:hover {background-color: deeppink}

<html>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown dropdown1">
        <a href="javascript:void(0)" class="dropbtn dropbtn1">Dropdown</a>
        <div class="dropdown-content dropdown1-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    &nbsp;
    <div class="nav2">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown dropdown2">
        <a href="javascript:void(0)" class="dropbtn dropbtn2">Dropdown</a>
        <div class="dropdown-content dropdown2-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    </div>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

    </body>
    </html>

Answer 2

希望，这会对您有所帮助。

<style>
    body {
        margin: 0;
        padding: 0
    }

    /*first navigation menu*/
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }
    /*end first navigation menu*/

    /*second navigation menu*/
    .nav2 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: deepskyblue;
    }

    .nav2 li {
        float: left;
    }

    .nav2 li a, .dropbtn2 {
        display: inline-block;
        color: yellow;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .nav2 li a:hover, .dropdown2:hover .dropbtn2 {
        background-color: deeppink;
    }

    li.dropdown2 {
        display: inline-block;
    }

    .dropdown2-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown2-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown2-content a:hover {background-color: deeppink}

    .dropdown2:hover .dropdown2-content {
        display: block;
    }
</style>

<html>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    &nbsp;

    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown2">
        <a href="javascript:void(0)" class="dropbtn2">Dropdown</a>
        <div class="dropdown2-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>


    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

    </body>
</html>

Answer 3

您可能想看看使用select tag来代替。这是一个纯HTML解决方案（尽管您当然可以根据需要使用CSS对其进行样式设置），并且可能会比尝试使用<div>元素和CSS来减少错误。

示例：

<select name="dropdown-1">
  <option value="1">Link 1</option>
  <option value="2">Link 2</option>
  <option value="3">Link 3</option>
</select>

<select name="dropdown-2">
  <option value="1">Link 1</option>
  <option value="2">Link 2</option>
  <option value="3">Link 3</option>
</select>

下拉菜单问题

3 个答案: