一：二级菜单
当鼠标悬停在一级菜单的某一个选项时，二级菜单将显示。效果如下。
父类元素使用相对定位，子类元素使用绝对定位，子类元素，默认隐藏，使用伪类选择:hover，在鼠标悬停在父类元素时将子类元素显示出来，
子类元素隐藏：
display:none;
子类元素显示：
display:block;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>二级菜单示例</title><style type="text/css">* {padding: 0px;margin: 0px;}/*一级菜单样式*/#nav {/*父类元素*/background-color: #a00;width: 800px;margin: 0 auto;}.nav-sub {/*子类元素*/width: 900px;margin: 0 auto;list-style-type: none;}.nav-sub>li {/*父类相对定位*/position: relative;float: left;height: 50px;line-height: 48px;}.nav-sub>li>a {display: block;text-decoration: none;color: #fff;font-size: 20px;padding-left: 10px;padding-right: 10px;}.nav-sub>li:hover {background-color: #c00;}/*清除浮动*/.nav-sub::after {content: "";display: block;height: 0;clear: both;}/*二级菜单样式*/.nav-sub>li>ul {/*二级菜单默认隐藏*/display: none;/* 清除列表的默认样式 */list-style-type: none;margin-top: 3px;/*子类绝对定位*/position: absolute;padding: 0px;margin: 0px;}.nav-sub>li>ul {width: 120px;}.nav-sub>li>ul>li {width: 450px;height: 30px;padding: 10px 20px 0px 20px;width: auto;background-color: #a00;text-align: center;line-height: 50px;/* border-radius: 20px; */}.nav-sub>li>ul>li>a {color: #FFFFFF;text-decoration: none;line-height: 24px;display: block;}.nav-sub>li>ul>li:hover {background-color: gold;}.nav-sub>li:hover>ul {/*鼠标经过一级菜单li时，二级菜单显示*/display: block;}</style></head><body><nav id="nav"><ul class="nav-sub"><li><a href="#">首页</a></li><li><a href="#">一级菜单</a><!-- 二级菜单 --><ul><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></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>
