如何在magister bootstrap主題中單擊菜單時創建子菜單？

我剛剛使用了bootstrap主題魔導師。現在我想在菜單下拉菜單下拉菜單中添加子菜單，但我錯了。你可以看到它，並給我建議。如何在magister bootstrap主題中單擊菜單時創建子菜單？

.mainmenu .dropdown-menu { 
 
\t top: -14em; 
 
\t left: 0px; 
 
\t font-size: 13px; 
 
\t padding:0; 
 
\t background:none; 
 
\t border:0 none; 
 
\t border-radius: 2px; 
 
\t -webkit-box-shadow: none; 
 
\t box-shadow: none; 
 
\t display:block; 
 
\t opacity:0; 
 
\t -webkit-transition: all .45s; 
 
\t -moz-transition: all .45s; 
 
\t   transition: all .45s; 
 
} 
 
.mainmenu .dropdown-menu .active { 
 
\t font-weight:bold; 
 
} 
 
.mainmenu .open .dropdown-menu { 
 
\t top:2px; 
 
\t opacity:1; 
 
} 
 
.mainmenu .dropdown-menu a { 
 
\t padding:10px 10px; 
 
\t margin:0; 
 
\t color:white; 
 
\t text-decoration: none; 
 
\t -webkit-border-radius: 2px; 
 
\t -moz-border-radius: 2px; 
 
\t   border-radius: 2px; 
 
} 
 
.mainmenu .dropdown-menu a:hover { 
 
\t background:rgba(255,255,255,.1); 
 
\t color:white; 
 
\t padding:10px 8px 10px 12px; 
 
} 
 
.mainmenu .dropdown-menu ul li ul a{ 
 
\t list-style:none; 
 
\t background:red; 
 
\t padding:0; 
 
\t margin:0; 
 
} 
 
.mainmenu .dropdown-menu ul li ul a:hover{ 
 
\t color:blue; 
 
}

<ul class="dropdown-menu" > 
 
    <li><a href="#">link</a></li> 
 
    <li><a href="#">submenu</a></li> 
 
    <ul> 
 
    <li><a href="#">submenu 1 link</a></li> 
 
\t <li><a href="#">submenu 2 link</a></li> 
 
\t <ul> 
 
\t <li><a href="#">submenu 2-1 link</a></li> 
 
\t <li><a href="#">submenu 2-2 link</a></li> 
 
\t </ul> 
 
\t <li><a href="#">submenu 3 link</a></li> 
 
    </ul> 
 
    <li><a href="#">link</a></li> 
 
    <li><a href="#">link</a></li> 
 
</ul>

來源

2014-12-05 Headshot

通過這種方式，您可以創建下拉列表，但主題的您提供的鏈接，具有導航這是可摺疊。

<body> 
<div class="container"> 
<h2>Dropdowns</h2> 
<p>The .dropdown class is used to indicate a dropdown menu.</p> 
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>           
<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials 
<span class="caret"></span></button> 
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li> 
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li> 
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li> 
<li role="presentation" class="divider"></li> 
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li> 
</ul> 
</div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> 
</body> 
</html>

來源

2014-12-05 15:23:50

如何在magister bootstrap主題中單擊菜單時創建子菜單？

回答

相關問題