Drop-down menu and Hover menu (submenu)

advertisements

Istanbul section right pulldown a hover menu how do I do it?

<li class="dropdown" data-toggle="collapse" data-target="#navbar-collapse-1">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Otoparklar <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a aria-controls="overview" role="tab" data-toggle="tab" href="#istanbul">İstanbul</a></li>
        <li><a aria-controls="overview" role="tab" data-toggle="tab" href="#eskisehir">Eskişehir</a></li>
        <li><a aria-controls="overview" role="tab" data-toggle="tab" href="#aydin">Aydın</a></li>
    </ul>
</li>


You can do this dropdown menu with CSS

This is a easy example how to do. First, add class to know which level is it.

<ul class="firstLevel">

Second, add css for hover of this element, do something to his son

ul.firstLevel li:hover > ul

Then, add colors, transitions, ...

ul.secondLevel {
  display: none;
}
ul.firstLevel li:hover > ul {
  display: block
}
<ul class="firstLevel">
  <li>
    <a href="">Birds</a>
    <ul class="secondLevel">
      <li>
        <a href="">Ratites</a>
      </li>
      <li>
        <a href="">Fowl</a>
      </li>
      <li>
        <a href="">Neoaves</a>
      </li>
    </ul>
  </li>
</ul>