代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*初始化全局*/ *{margin:0; padding:0;} body{background:#737373;} /*设置导航nav居中*/ nav{background:#fff;text-align:center;} /*nav属性inliblock 保证居中*/ nav ul{display:inline-block;} /*设置相对定位，保证子菜单位置*/ nav li{float:left;list-style:none;position:relative;border-bottom:3px #fff solid;} /*悬停效果*/ nav li:hover{border-bottom:3px #006B8C solid;} /*设置连接样式，行内->块级*/ nav a{display:block;padding:6px 20px;text-decoration: none;color:#676767;} nav a:hover{background:#73C39F;color:#fff;} nav a:active{background:#fff;color:#73C39F;} /*子菜单清浮动*/ nav li li{float: none;} /*隐藏子菜单 设置位置*/ nav li ul{display:none;background:#fff;position:absolute;min-width:200px;left:0;top:110%;} /*三级以后菜单处理*/ nav li li ul{position:absolute;left:100%;top:0;} /*悬停显示子菜单*/ nav li:hover > ul{display:block;} </style> </head> <body> <div id="container"> <nav> <ul> <li><a href="#">一级菜单001</a></li> <li><a href="#">一级菜单002</a></li> <li><a href="#">一级菜单003</a></li> <li><a href="#">一级菜单004</a> <ul> <li><a href="#">二级菜单004001</a></li> <li><a href="#">二级菜单004002</a> <ul> <li><a href="#">三级菜单</a></li> </ul> </li> </ul> </li> <li><a href="#">一级菜单005</a></li> </ul> </nav> </div> </body> </html>
显示效果：
