2016-08-11 3 views

Antwort

0
<div class="container"> 
    <div class="row"> 
     <h2>Multi level dropdown menu in Bootstrap 3</h2> 
     <hr> 
     <div class="dropdown"> 
      <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> 
       Dropdown <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
       <li><a href="#">Some action</a></li> 
       <li><a href="#">Some other action</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-submenu"> 
       <a tabindex="-1" href="#">Hover me for more options</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">Second level</a></li> 
        <li class="dropdown-submenu"> 
        <a href="#">Even More..</a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">3rd level</a></li> 
         <li><a href="#">3rd level</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Second level</a></li> 
        <li><a href="#">Second level</a></li> 
       </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<style> 


.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
} 
+0

Ich mag Untermenü hinzufügen in folgendem Link nicht in Bootstrap http://www.jqueryscript.net/demo/Mobile-friendly-Responsive-Navigation-Plugin-Swipe -Navigation/ – user2746224

+0

Verweise auf diese Links wird es helfen !! https://www.freshdesignweb.com/3-level-responsive-drop-down-navigation-menu-jquery-css3/ https://www.sanwebe.com/assets/drop-down-menu/ –

+0

Ich möchte ein Untermenü im Überlaufmenü hinzufügen, wie oben beschrieben – user2746224

Verwandte Themen