Question

我一直试图解决这个问题2天，并尝试了我能想到的一切。我已经尝试了一千个位置，显示和浮动的组合。

我正在尝试制作一个垂直导航栏，其中导航按钮的内容作为第二层垂直按钮出现，而第二组则是第三层垂直按钮等。

我的问题是第二层按钮取代了第一层的按钮。奇怪的是，第3层并没有取代第2层或第1层。

我附上了JSfiddle。

<html>

  <head>
   <style>

    .dropdown {
      position: relative;
      display: block;
      clear: both;
      margin: 5px;
    }

    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      float: left;
      min-width: 100px;
      margin-top: 5px;
    }

    .dropdown-options {
      display: none;
      min-width: 160px;
      z-index: 1;
    }

    .dropbtncontent {
      min-width: 160px;
      border: none;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      padding: 2px;
      text-decoration: none;
      margin: 2px;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      z-index: 1;
    }

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

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

    .dropdown-content a {
      background-color: #4CAF50;
      color: white;
      padding: 2px;
      text-decoration: none;
      margin: 2px;
      display: block;
    }

   </style>

  </head>

  <body>

    <div class="dropdown">
      <button class="dropbtn">Dropdown1</button>

      <div class="dropdown-options">
        <button class="dropbtncontent">Dropdown1.1</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
      <div class="dropdown-options">
        <button class="dropbtncontent">Dropdown1.2</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
      <div class="dropdown-options">
        <button class="dropbtncontent">Dropdown1.3</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Dropdown2</button>
      <div class="dropdown-content">
        <a href="#">Link 3</a>
        <a href="#">Link 2</a>
        <a href="#">Link 4</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Dropdown3</button>
      <div class="dropdown-content">
        <a href="#">Link y</a>
        <a href="#">Link r</a>
        <a href="#">Link a4</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Dropdown4</button>
      <div class="dropdown-content">
        <a href="#">Lin</a>
        <a href="#">Lin 2</a>
        <a href="#">Lk 4</a>
      </div>
    </div>

  </body>

</html>

如果有人有任何建议，我真的很感激。

Answer 1

您可以通过将.dropbox课程更改为此来实现所需的效果：

.dropdown {
    position: relative;
    display: block;
    clear: both;
    margin: 5px;
    //new code below
    overflow:show;
    height: 50px;
}

固定高度会导致某些第二层选项显示，直到达到高度。有了这个，通过设置overflow:show，您可以让孩子在不影响其他元素的情况下显示大于父母大小的内容。

由导航内容替换的垂直导航栏按钮

1 个答案: