Question

我想要一个菜单，以便下拉菜单以较小的宽度进入菜单。

这适合那些喜欢挑战的人。这就是我得到的：

nav{
	line-height:100%;
	opacity:.9;
}nav ul{
	background: #999;
 	padding: 0px;
	border-radius: 20px;  
	list-style: none;
	position: relative;
	display: inline-table;
}nav ul ul{
	display: none;
	background: #567;
	border-radius: 0px;
	padding: 0px;
	position: absolute;
	top: 100%;
}nav ul li{
	float: left;
}nav ul li a{
	display: block;
	padding: 25px 40px;
	color: #666;
	text-decoration: none;
}nav ul li:hover{
	background: #345;
}nav ul li:hover a{
	color: #fff;
}nav ul li:hover>ul{
	display: block;
}nav ul ul li{
	float: none; 
	border-top: 1px solid #567;
	border-bottom: 1px solid #678;
	position: relative;
}nav ul ul li a{
	padding: 15px 40px;
	color: #fff;
}nav ul ul li a:hover{
	background: #456;
}nav ul ul ul{
	position: absolute; left: 100%; top:0;
}

<!DOCTYPE html>
<html>

<body>
	
	<nav>
		<ul>
			<h3>
			<li><a href="otherpage.html">Home</a></li>
			<li><a href="otherpage.html">Page2</a>
				<ul>
					<li><a href="otherpage.html">Page2.1</a></li>
					<li><a href="otherpage.html">Page2.2</a></li>
					<li><a href="otherpage.html">Page2.3</a>
						<ul>
							<li><a href="otherpage.html">Page2.3.1</a></li>
							<li><a href="otherpage.html">Page2.3.2</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="otherpage.html">Page3</a>
				<ul>
					<li><a href="otherpage.html">Page3.1</a></li>
					<li><a href="otherpage.html">Page3.2</a></li>
				</ul>
			</li>
			<li><a href="otherpage.html">Page4</a></li>
			</h3>
		</ul>
	</nav>

</body>

</html>

我想要一个导航菜单，它可以完成我目前所拥有的操作，但是当宽度很小时，下拉菜单就会超出菜单的其余部分。有点像这样：how to set css width equal to length of longest text。

我不太了解但是这需要javascript吗？我也很欣赏类似于链接的javascript下拉效果，但这不是必需的。

如果您不理解我的问题，请全屏运行我的代码，然后减小浏览器的宽度，以便下拉列表无法点击。

即使在调整宽度时也可以使文本间距成为可能。

由于

Answer 1

你喜欢bootstrap所以这里是一个快速介绍。

Bootstrap（前端框架）Bootstrap是一个免费的集合用于创建网站和Web应用程序的工具。它包含HTML和基于CSS的排版，表格，按钮，导航设计模板和其他界面组件，以及可选的JavaScript 扩展。

您需要在代码中包含这些路径才能使用其功能：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

您也可以下载bootstrap here。

列出了引导程序的不同组件here

尝试谷歌搜索以了解更多信息。

复杂的html导航菜单

1 个答案: