Question

我需要下拉菜单向下打开而不是向侧面打开。如何让菜单实现这一点？

2019-08-20

1119

html css

启动下拉菜单时出现问题

我尝试查看是否可以使用 CSS 的 position 或 text-align 属性。

.navbar {
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .navbar a, .dropdown-content a{
      float: right;
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .navbar a:hover, .dropdown:hover .dropbtn {
      background: red;
      color: black;
    }
    
    .navbar a:active{
      background: green;
      color: black;
    }
        
    .dropdown-content {
      display: none;
      background-color: #333;
    }
    
    .dropdown-content a:hover {
      background-color: red;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }

<div class = "navbar">
    <a href = "#">Page 6</a>
    <a href = "#">Page 5</a>
    <a href = "#">Page 4</a>
    <a href = "#">Page 3</a>
    <a href = "#">Page 2</a>
    <div class="dropdown">
        <a class="dropbtn">Dropdown
          <i class="fa fa-caret-down"></i>
        </a>
        <div class="dropdown-content">
          <ul>
          <a href="#">Link 3</a>
          <a href="#">Link 2</a>
          <a href="#">Link 1</a>
          </ul>
        </div>
      </div>
</div>

下拉菜单在导航栏中向侧面打开，位于下拉按钮的左侧，而不是向下打开。如何使其向下？

Answer 1

将菜单和子菜单嵌套在无序列表中。

<ul id='menu'>
   <li><a href='#'>Menu</a>
     <ul>
         <li><a href='#'>Submenu1</a></li>
         <li><a href='#'>Submenu2</a></li>
         <li><a href='#'>Submenu3</a></li>
     </ul>
   </li>

查看这个 JSSfiddle ，了解如何设置样式表。

Answer 2

您需要将 dropdown-content 设置为绝对定位，并允许导航栏溢出。因此，您的 css 应该如下所示：

.navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.dropdown {
  position: relative;
  float: right;
}

.navbar a{
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar > a, .dropbtn {
  float: right;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background: red;
  color: black;
}

.navbar a:active{
  background: green;
  color: black;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  display: none;
  background-color: #333;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background-color: red;
}

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

<div class = "navbar">
<a href = "#">Page 6</a>
<a href = "#">Page 5</a>
<a href = "#">Page 4</a>
<a href = "#">Page 3</a>
<a href = "#">Page 2</a>
<div class="dropdown">
    <a class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </a>
    <div class="dropdown-content">
      <a href="#">Link 3</a>
      <a href="#">Link 2</a>
      <a href="#">Link 1</a>
      </ul>
    </div>
  </div>
</div>

以下是结果： https://jsfiddle.net/dLmr7wbk/