纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

2020-04-27 07:59:00易采站长站整理

<li class=”item”><a href=”#”>三级导航 3</a></li>
<li class=”item”><a href=”#”>三级导航 4</a></li>
<li class=”item”><a href=”#”>三级导航 5</a></li>
</ul>
</li>
<li class=”item”><a href=”#”>二级导航 4</a>
<ul class=”nav”>
<li class=”item”><a href=”#”>三级导航 1</a></li>
<li class=”item”><a href=”#”>三级导航 2</a></li>
<li class=”item”><a href=”#”>三级导航 3</a></li>
<li class=”item”><a href=”#”>三级导航 4</a></li>
<li class=”item”><a href=”#”>三级导航 5</a></li>
</ul>
</li>
<li class=”item”><a href=”#”>二级导航 5</a>
<ul class=”nav”>
<li class=”item”><a href=”#”>三级导航 1</a></li>
<li class=”item”><a href=”#”>三级导航 2</a></li>
<li class=”item”><a href=”#”>三级导航 3</a></li>
<li class=”item”><a href=”#”>三级导航 4</a></li>
<li class=”item”><a href=”#”>三级导航 5</a></li>
</ul>
</li>
</ul>
</li>
<li class=”item”><a href=”#”>一级导航 5</a>
<ul class=”nav”>
<li class=”item”><a href=”#”>无子导航 1</a></li>
<li class=”item”><a href=”#”>无子导航 2</a></li>
<li class=”item”><a href=”#”>无子导航 3</a></li>
<li class=”item”><a href=”#”>无子导航 4</a></li>
<li class=”item”><a href=”#”>无子导航 5</a></li>
</ul>
</li>
</ul>
</body>
</html>

不过如果要探讨实用性的话,还是需要用JavaScript来兼容IE6下li不支持hover伪类的BUG,改动也很简单,也来个Demo:
https://www.jb51.net/jiaoben/111260.html