Выпадающее меню и меню наведения (подменю)

Question

Стамбул раздел справа раскрывающееся меню наведения, как мне это сделать?

<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> 

Answer 1

Вы можете сделать это выпадающее меню с CSS

Это простой пример того, как делать. Сначала добавьте класс, чтобы узнать, на каком уровне он.

<ul class="firstLevel"> 

Во-вторых, добавить CSS для висения этого элемента, сделать что-то своему сыну

ul.firstLevel li:hover > ul 

Затем добавить цвета, переходы, ...

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>

Answer 2

Код, в котором вы нуждаетесь:

HTML:

<nav id="main_nav"> 
    <ul> 
     <li> 
     <a href="">Dropdown</a> 
      <ul> 
      <li> 
       <a href="">example</a> 
       <ul> 
       <li><a href="">example1</a></li> 
       <li><a href="">example2</a></li> 
       <li><a href="">example3</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
</nav> 

CSS:

* { 
     margin: 0; 
     padding: 0; 
    } 
    body { 
     font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif; 
     background: #333; 
     margin: 15px; 
    } 

    article { 
     width: 600px; 
     margin: 0 auto; 
     background: #000; 
     color: #fff; 
     border-radius: 5px; 
     box-shadow: 0 0 15px 2px #666; 
    } 

    section { 
     clear: left; 
    } 

    h1 { 
     font-size: 45px; 
     font-weight: 100; 
     letter-spacing: 15px; 
     text-align: center; 
    } 

    h1, #main_content, #dog_link { 
     padding: 15px; 
    } 

    p { 
     margin: 15px 0; 
    } 

    a { 
     color: #06c; 
    } 

    #main_nav ul { 
     background: white; 
     float: left; 
     -webkit-transition: .5s; 
     transition: .5s; 
    } 

    #main_nav li { 
     float: left; 
     position: relative; 
     width: 150px; 
     list-style: none; 
     -webkit-transition: .5s; 
     transition: .5s; 
    } 

    #main_nav > ul > li > a, h1 { 
     text-transform: uppercase; 
    } 

    #main_nav a { 
     display: block; 
     text-decoration: none; 
     padding: 5px 15px; 
     color: #000; 
    } 

    #main_nav ul ul { 
     position: absolute; 
     left: 0; 
     top: 100%; 
     visibility: hidden; 
     opacity: 0; 
    } 

    #main_nav ul ul ul { 
     left: 100%; 
     top: 0; 
    } 

    #main_nav li:hover, #main_nav li:hover li { 
     background: #ddd; 
    } 

    #main_nav li li:hover, #main_nav li li:hover li { 
     background: #bbb; 
    } 

    #main_nav li li li:hover { 
     background: #999; 
    } 

    #main_nav li:hover > ul { 
     visibility: visible; 
     opacity: 1; 
    } 

JSFiddle: https://jsfiddle.net/szs4Lapn/1/

На мой взгляд, связь я дал вам на комментарий объясняет это очень хорошо. На самом деле я придумал это решение, прочитав этот пост. Пожалуйста, оставьте комментарий, чтобы сообщить мне, был ли я полезен. :)

Ссылки:

• http://www.htmldog.com/techniques/dropdowns/

• http://www.htmldog.com/examples/dropdowns3/