Как добавить выпадающую навигацию к моей текущей навигации с таким же стилем

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> 

Как расширить свою навигацию и раскрывающийся список, последний «Событие»

Спасибо.

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>