Question

This is my current navigation bar

<div class="nav-wrapper">
        <div class="nav-container wrapper cf">
        <div class="dropdown">
            <ul class="nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="our-services.html">Veterans</a></li>
                <li><a href="admissions-benefits.html">Phase One</a></li>
                <li><a href="about-us.html">Phases Two</a></li>
                <li><a href="careers.html">Partners</a></li>
                <li><a href="contact-us.html">Donate</a></li>
                <li><a href="">Events</a></li>
                <li><a href="">More</a></li>
            </ul>
        </div>
        <a href="index.html#sidr" class="nav-mobile">Menu</a>
    </div>
    </div>

如何将我的导航扩展到下拉列表，上一个＆＃34;事件＆＃34;

感谢。

Answer 1

您只需在活动的ul内添加新的li，然后使用hover上的li隐藏弹出窗口，请参阅以下示例：

ul.nav > li {
  display: inline-block;
  width: auto;
  border: 1px solid maroon;
  margin 0 12px float: left;
  vertical-align: top;
}
ul.nav > li > a {
  text-transform: uppercase;
  color: maroon;
}
#events .events-dropdown {
  display: none;
}
#events:hover .events-dropdown {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav-wrapper">
  <div class="nav-container wrapper cf">
    <div class="dropdown">
      <ul class="nav">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="our-services.html">Veterans</a>
        </li>
        <li id="events">
          <a href="#">Events</a>
          <ul class="events-dropdown">
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </li>
        <li><a href="">More</a>
        </li>
      </ul>
    </div>
    <a href="index.html#sidr" class="nav-mobile">Menu</a>
  </div>
</div>

如何将下拉导航添加到具有相同样式的当前导航

1 个答案: