<!DOCTYPE html>
<html>
<head>
<title>三级菜单</title>
<meta charset="utf-8" />
<style type="text/css">
/*添加视觉样式*/
.multi_drop_menu {font:1em helvetica, arial, sans-serif;}
.multi_drop_menu a { display: block; color: #555; background-color: #eee; padding: 0.2em 1em; border-width: 3px; border-color: transparent; }
.multi_drop_menu a:hover {color:#fff;background-color:#aaa;}
.multi_drop_menu a:active {background:#fff;color:#ccc;}
/*添加功能样式*/
.multi_drop_menu * {margin:0; padding:0;}
/*强制 ul 包围 li*/
.multi_drop_menu ul {float:left;}
.multi_drop_menu li {/*水平排列菜单项*/float:left;/*去掉默认的项目符号*/list-style-type:none;/*为子菜单提供定位上下文*/position:relative;}
.multi_drop_menu li a {/*给每个链接添加一个右边框*/border-right-style:solid;/*背景只出现在内边距区域后面*/background-clip:padding-box;/*去掉链接的下划线*/text-decoration:none;}
.multi_drop_menu li:last-child a {border-right-style:none;}
/* 添加的视觉样式 */
/*二级菜单宽度*/
.multi_drop_menu li ul {width:8em;}
.multi_drop_menu li li a {/*去掉继承的右边框*/border-right-style:none;/*添加上边框*/border-top-style:solid;}
/* 添加的功能样式 */
.multi_drop_menu li ul {display:none;/*相对于父菜单项定位*/position:absolute;/*左边与父菜单项对齐*/left:0;/*顶边与父菜单项底边对齐*/top:100%;}
.multi_drop_menu li li {/*停止浮动，恢复堆叠*/float:none;}
.multi_drop_menu li li ul {/*继续隐藏三级下拉菜单*/display:none;}
.multi_drop_menu li:hover > ul {/*父元素悬停时显示*/display:block;}
.multi_drop_menu li li ul {/*相对于父菜单定位*/position:absolute;/*与父菜单右侧对齐*/left:100%;/*与父菜单项顶边对齐*/top:0;}
/* 垂直列表 */
.multi_drop_menu.vertical {width:8em;}
.multi_drop_menu.vertical li a {border-right-style:none;border-top-style:solid;}
.multi_drop_menu.vertical li li a {border-left-style:solid;}
.multi_drop_menu.vertical ul,.multi_drop_menu.vertical li {/* 让顶级菜单垂直显示*/float:none;}
.multi_drop_menu.vertical li ul {/*子菜单左边与上一级菜单右边对齐*/left:100%;/*子菜单顶边与上一级菜单项顶边对齐*/top:0;}
.multi_drop_menu li:hover > a {/*悬停时的文本颜色*/color:#fff;/*悬停时的背景颜色*/background-color:#aaa}
</style>
</head>
<body>
<nav class="multi_drop_menu vertical">
<!-- 一级开始 -->
<ul>
<li><a href="#">首页</a>
<!-- 二级开始 -->
<ul>
<li><a href="#">第二</a>
<!-- 三级开始 -->
<ul>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
</ul>
<!-- 三级结束 -->
</li>
<li><a href="#">第二</a>
<!-- 三级开始 -->
<ul>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
</ul>
<!-- 三级结束 -->
</li>
<li><a href="#">第二</a>
<!-- 三级开始 -->
<ul>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
<li><a href="#">第三</a></li>
</ul>
<!-- 三级结束 -->
</li>
<li><a href="#">第二</a></li>
</ul>
<!-- 二级结束 -->
</li>
<li><a href="#">第一</a></li>
<li><a href="#">第一</a></li>
<li><a href="#">第一</a></li>
</ul>
<!-- 一级结束 -->
</nav>
</body>
</html>
