复杂的 html 导航菜单答案

【问题标题】：complex html nav menu复杂的 html 导航菜单
【发布时间】：2015-02-02 04:21:23
【问题描述】：

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

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

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 下拉效果，但这不是必需的。

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

即使在宽度调整时也可以使文本间距加分。

谢谢

【问题讨论】：

我的理解是你想要一个响应式导航栏，它可以在调整大小时自行调整大小？这就是你想要的吗？
并非如此。我想要它，这样当它调整自身大小时，它仍然可以作为菜单工作，这样人们就可以点击下拉链接。现在下拉菜单的其余部分在小宽度处黯然失色
你为什么不使用引导响应导航栏？它有你需要的一切。
那是什么？抱歉，还有很多我不知道的...
试试这个 --> jsfiddle.net/incrediblex/n0yfd22v/1

标签： javascript html css nav

【解决方案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>

您也可以下载引导程序here。

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

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

【讨论】：