Question

我有以下代码，除了需要作为最后一个链接的“联系”链接外，它工作正常。但是，下拉似乎总是放在最后？

IT基本上是我要创建的http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar导航栏，在下拉链接后有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>
  <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下拉菜单

4 个答案: