HTML 左侧带有链接的下拉菜单

Question

我有以下代码，它工作正常，除了“联系人”link 需要是最后一个 link。但是，下拉列表似乎总是放在最后？

它基本上是我想在 http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar 处创建的导航栏，在下拉列表 link 之后还有 2 个额外的 links link。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float:right;
}

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: #111;
}

.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);
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>



</body>
</html>

它没有正确呈现，我不确定如何更改 css 来完成此操作。或者也许还有其他方法？

谢谢

Answer 1

试试这个

.dropdown {
    display: inline-block;
    float:left
}

Answer 2

尝试将下拉列表的标签从 div 更改为 li。可能浏览器首先呈现所有 li 然后 div.

<li class="dropdown">
  <a href="#" 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>

Answer 3

<li>  
    <div class="dropdown">
        <a href="#" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </li>

Answer 4

将 <div> 放入 <li> 试试这个。供您参考，这里有 2 个带有示例的站点。 Example 1 Example 2

<!DOCTYPE html>
<html>

  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        float: right;
      }

      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: #111;
      }

      .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);
      }

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

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

      .dropdown:hover .dropdown-content {
        display: block;
      }

    </style>
  </head>

  <body>

    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li>
        <div class="dropdown">
          <a href="#" class="dropbtn">Dropdown</a>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
      </li>
      <li><a href="#products">Products</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>



  </body>

</html>

HTML 左侧带有链接的下拉菜单

HTML dropdown menu with links on the left

html

dropdown