Dropdown-Menü und Hover-Menü (Untermenü)

Question

Istanbul Abschnitt rechts Pulldown ein Hover-Menü Wie mache ich das?

<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

Sie können mit CSS

Dies ist ein einfaches Beispiel dieses Dropdown-Menü tun, wie zu tun. Fügen Sie zuerst Klasse hinzu, um zu wissen, welches Niveau es ist.

<ul class="firstLevel"> 

Zweitens fügen Sie CSS für Hover dieses Elements, etwas tun, um seinen Sohn

ul.firstLevel li:hover > ul 

Dann fügen Sie Farben, Übergänge, ...

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

Der Code, den Sie benötigen, ist:

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/

Meiner Meinung nach ist die Verbindung, die ich Ihnen auf den Kommentar gab erklärt es sehr gut. Tatsächlich habe ich diese Lösung gefunden, nachdem ich diesen Beitrag gelesen hatte. Bitte hinterlassen Sie einen Kommentar, um mich wissen zu lassen, ob ich hilfreich war. :)

Links:

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

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