Question

我有一个固定在左侧的自举菜单，问题在于手风琴。

我需要菜单显示在右侧并且高度为100％。

我看过很多菜单，但不尊重引导程序并且没有响应，所以我没能在移动终端中看到它。

图像菜单正常：

活动图像菜单：

enter image description here

我需要的图片菜单：

enter image description here

升级： http://www.bootply.com/Xm9xYktQaq

不需要手风琴，需要右键下拉

Answer 1

这是简单的菜单学习和制作菜单一切顺利：）

 body {
 font-family: helvetica, arial, sans-serif;
 background: #e3e3e3;text-align: center;
}

/* MENU */

#nav {
 background: #e5e5e5;
 float: left;
 margin: 0; padding: 0;
 border: 1px solid white;
 border-bottom: none;
}

#nav li a, #nav li {
 float: left;
}

#nav li {
 list-style: none;
 position: relative;
}

#nav li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
 background: #292929;
 background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
 border-right: 1px solid #3c3c3c;
 border-left: 1px solid #292929;
 border-bottom: 1px solid #232323;
 border-top: 1px solid #545454;
}

#nav li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}


/* Submenu */

.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}

#nav li ul {
 display: none;
 position: absolute;
 left: 0;
 top: 100%;
 padding: 0; margin: 0;
}

#nav li:hover > ul {
 display: block;
}

#nav li ul li, #nav li ul li a {
 float: none;
}

#nav li ul li {
 _display: inline; /* for IE6 */
}

#nav li ul li a {
 width: 150px;
 display: block;
}

/* SUBSUB Menu */

#nav li ul li ul {
 display: none;
}

#nav li ul li:hover ul {
 left: 100%;
 top: 0;
}


#nav li ul

<body>

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a>
		<ul>
			<li><a href="#">About Us</a></li>
			<li><a href="#">About Them</a></li>
			<li><a href="#">About You</a>
				<ul>
					<li><a href="#">More About Us</a></li>
					<li><a href="#">More About Them</a></li>
					<li><a href="#">More About You</a></li>						
				</ul>
			</li>						
		</ul>
	</li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a>
		<ul>
			<li><a href="#">International</a></li>
			<li><a href="#">Corporate</a>
				<ul>
					<li><a href="#">International</a></li>
					<li><a href="#">Corporate</a></li>
					<li><a href="#">American Offices</a></li>
				</ul>
			</li>
			<li><a href="#">American Offices</a></li>						
		</ul>
	</li>	
	
</ul>
     
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>	
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>

Bootstrap右侧固定左下拉列表

1 个答案: