Question

我刚刚使用了bootstrap主题魔法师。现在我想在单击菜单时在菜单下拉菜单中添加子菜单，但我错了。你可以看到它并为我提供建议。

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

Answer 1

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

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

如何在magister bootstrap主题中单击菜单时创建子菜单？

1 个答案: