把每个睡醒后的早晨当成一件礼物，把每个开心后的微笑当成一个习惯。朋友，短信祝早上好，愿你微笑今天，快乐永远！有勇气并不表示恐惧不存在，而是敢面对恐惧克服恐惧。
先来个Demo： https://www.haodaima.com/jiaoben/111258.html
好吧，我承认，我有点标题党了，IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影（写的好像玄幻小说似的=。=）
不过纯属研究，O(∩_∩)O哈哈~
宽度自适应是指各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。
DOM结构比较简单，只是 ol.nav 与 li.item 的互相嵌套而已。
看代码吧（长是长了点，但其实你会发现导航的标签结构真的真的很简单，重要的是CSS部分）：
复制代码
代码如下:<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>无限级纯CSS导航菜单</title>
<style type="text/css">
.nav{
margin: 0;
padding: 0;
float: left;
list-style: none;
background: #222;
}
.nav a{
color: #ddd;
display: block;
padding: 0 15px;
text-decoration: none;
}
.nav a:hover{
color: #2FAADD;
}
.nav .item{
margin: 0;
padding: 0;
float: left;
height: 35px;
line-height: 35px;
white-space: nowrap;
}
.nav .item:hover>a{
color: #2FAADD;
}
.nav .item:hover>.nav{
display: block;
}
.nav .nav{
top: 100%;
left: 0;
display: none;
background: #444;
position: absolute;
border: 1px solid #888;
}
.nav .nav .item{
clear: both;
min-width: 100%;
}
.nav .nav .nav{
top: -1px;
left: 100%;
}
.nav .nav .nav .nav .nav .nav{
left: auto;
right: 100%;
}
</style>
</head>
<body>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">一级导航 1</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 1</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 2</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 4</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">长长的一级导航 2</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 1</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 2</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">更长的二级导航 3</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">低调的三级导航 5</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">四级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">藏的很深的四级导航 2</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">藏的更深的五级导航 0</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">五级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">五级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">五级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">五级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">下面该往左了吧</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">我在左边</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">我真的在左边</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">我就要赖在左边</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">杨丞琳的左边好听</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">呜呜，今年双十一又要过节</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">妹纸妹纸在哪里？</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">四级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">四级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">四级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 4</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 5</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">一级导航 4</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 1</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 2</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 3</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 4</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">二级导航 5</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">三级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">一级导航 5</a>
<ul class="nav">
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 1</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 2</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 3</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 4</a></li>
<li class="item"><a rel="nofollow noopener noreferrer" href="#">无子导航 5</a></li>
</ul>
</li>
</ul>
</body>
</html>
不过如果要探讨实用性的话，还是需要用JavaScript来兼容IE6下li不支持hover伪类的BUG，改动也很简单，也来个Demo：
https://www.haodaima.com/jiaoben/111260.html
到此这篇关于纯CSS如何实现兼容IE7及以上宽度自适应无限级导航菜单附演示就介绍到这了。现在的我狠努力，我只是想证明你当初是瞎了眼，而我会找到比你更出色的人，给她全世界。更多相关纯CSS如何实现兼容IE7及以上宽度自适应无限级导航菜单附演示内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
