复杂的html导航菜单

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应用程序的免费工具集合。它包含用于排版、表单、按钮、导航和其他界面组件的超文本标记语言和基于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中列出了用于引导的不同组件

试着用谷歌搜索一下，了解更多信息。