以前觉得级联导航实现应该很简单，就是使用css的hover属性来实现就可以了，于是也没有过多地留意实践。可是在最近的面试当中，当被问到这个问题的时候才明白，很多东西不能想当然地以为这样做就可以了，不单只是知道大概的思路就认为OK了，更需要实际的动手能力。
后来就实际操作了级联菜单的实现，借此机会把它弄成一个模板来和大家一起学习。
以下是HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>纯css级联导航</title>
</head>
<body>
<div class="main">
<ul class="one-nav">
<li>
<a href="javascript:;">一级导航</a>
<ul class="two-nav">
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一级导航</a>
<ul class="two-nav">
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一级导航</a>
<ul class="two-nav">
<li><a href="javascript:;">二级导航</a></li>
<li>
<a href="javascript:;">二级导航></a>
<ul class="three-nav">
<li><a href="javascipt:;">三级导航</a></li>
<li><a href="javascipt:;">三级导航</a></li>
<li><a href="javascipt:;">三级导航</a></li>
</ul>
</li>
<li><a href="javascript:;">二级导航</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一级导航</a>
<ul class="two-nav">
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一级导航</a>
<ul class="two-nav">
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
</ul>
</li>
<li>
<a href="javascript:;">一级导航</a>
<ul class="two-nav">
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li><a href="javascript:;">二级导航</a></li>
<li>
<a href="javascript:;"><二级导航</a>
<ul class="three-nav">
<li><a href="javascipt:;">三级导航</a></li>
<li><a href="javascipt:;">三级导航</a></li>
<li><a href="javascipt:;">三级导航</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS部分：
body,div,ul,li,a{margin: 0;padding: 0;text-decoration: none;}
/* 一级导航 */
.one-nav li{list-style-type: none;float: left;width: 16.57%;text-align: center;background-color: #3391E6;border-right: 1px solid white;cursor: pointer;height: 30px;line-height: 30px;}
.one-nav li:nth-last-child(1){border-right: none;}
.one-nav li a{color: white;}
.one-nav li:hover .two-nav{display: block;}
.one-nav li:hover{background-color: #4260D7;}
/* 二级导航 */
.two-nav {display: none;}
.two-nav li{width: 100%;}
.two-nav li:hover .three-nav{display: block;position: relative;}
/* 三级导航 */
.three-nav{position: absolute;width:100%;left: 100%;bottom: 100%;}
/* 最右边的三级导航显示在左边 */
.one-nav li:nth-last-child(1) .two-nav li .three-nav li{width: 100%;position:relative;right: 200%;}
效果图如下：
例子比较简单，但往往越简单的东西越需要脚踏实地地去实践和经历，人生已如此，共勉。
Author:致知
Sign:路漫漫其修远兮，吾将上下而求索。
时间： 2024-10-13 07:17:15