<!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>
