Question

我希望下拉效果能够继续下去。

我可以用display: inline-table效果来做到这一点。 1）有更好的方法吗？

虽然上面有效，但它扩展了父组件右侧的内容（在本例中为dropbtn）。你可以参考下面的代码如何这个uglyfies布局。我想让它跨越父按钮的左侧，以便按钮保持在当前位置。 2）有没有办法破解它？

提前致谢！

<!DOCTYPE html>
<html>

<head>
  <style>
    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .btn {
      background-color: #37abc8ff;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      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: inline-table;
    }
    
    .dropdown-content a:hover {
      background-color: #f1f1f1
    }
    
    .dropdown:hover .dropdown-content {
      display: inline-table;
    }
    
    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
    
    .wrapper {
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>

<body>

  <h2>Hoverable Dropdown</h2>
  <p>Move the mouse over the button to open the dropdown menu.</p>

  <div class="wrapper">
    <button class="btn">Hello</button>
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>

</body>

</html>

强文

Answer 1

最快最简单的方法是将.dropdown-content div放在HTML结构中的.dropbtn按钮之前：

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.btn {
  background-color: #37abc8ff;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  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: inline-table;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: inline-table;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="wrapper">
  <button class="btn">Hello</button>
  <div class="dropdown">
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    <button class="dropbtn">Dropdown</button>
  </div>
</div>

CSS-如何正确实现下拉菜单横向？

1 个答案: