问如何创建子菜单时，单击菜单在先生引导主题？
EN

Stack Overflow用户

提问于 2014-12-05 15:12:39

回答 1查看 299关注 0票数 1

我刚用了引导主题先生。现在我想在菜单下拉菜单中添加子菜单，但我错了。你可以看到它并给我提建议。

.mainmenu .dropdown-menu {
	top: -14em;
	left: 0px;
	font-size: 13px;
	padding:0;
	background:none;
	border:0 none;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	display:block;
	opacity:0;
	-webkit-transition: all .45s;
	   -moz-transition: all .45s;
	        transition: all .45s;
}
.mainmenu .dropdown-menu .active { 
	font-weight:bold;
}
.mainmenu .open .dropdown-menu { 
	top:2px;
	opacity:1;
}
.mainmenu .dropdown-menu a { 
	padding:10px 10px;
	margin:0;
	color:white;
	text-decoration: none;
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
}
.mainmenu .dropdown-menu a:hover { 
	background:rgba(255,255,255,.1);
	color:white;
	padding:10px 8px 10px 12px;
}
.mainmenu .dropdown-menu ul li ul a{
	list-style:none;
	background:red;
	padding:0;
	margin:0;
}
.mainmenu .dropdown-menu ul li ul a:hover{
	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>
	<li><a href="#">submenu 2 link</a></li>
	<ul>
	  <li><a href="#">submenu 2-1 link</a></li>
	  <li><a href="#">submenu 2-2 link</a></li>
	</ul>
	<li><a href="#">submenu 3 link</a></li>
  </ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-12-05 15:23:50

通过这种方式，您可以创建下拉列表，但是提供链接的主题具有可折叠的导航。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27318956

复制

相似问题

问如何创建子菜单时，单击菜单在先生引导主题？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建子菜单时，单击菜单在先生引导主题？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建子菜单时，单击菜单在先生引导主题？
EN