css二级菜单的隐藏与显示_具有二级菜单的导航案例

下图为具有二级菜单的导航效果，鼠标悬浮在“服装”菜单时出现如图所示的二级菜单效果。

鼠标悬浮于二级菜单效果如下图所示：

注：鼠标悬浮于菜单时，二级菜单背景颜色为渐变，渐变颜色值为#900,#FF2F2F。

---

参考答案：

上例中HTML代码为：

<nav>  <ul>  <li><a href="#">首页a>li>  <li><a href="gaikuang.html">图书a>li>  <li><a href="index.html">家电a>        <ul>            <li><a href="#">手机a>li>            <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>  <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>  ul>nav>

CSS样式代码为：

/*边距清零*/* {margin: 0px;padding: 0px;}/*为了看清导航效果，设置上和左侧30像素外边距*/nav{margin-top:30px;margin-left:30px;}/*去掉一级菜单和二级菜单的列表项目符号 ；一级菜单水平排列*/nav ul li {list-style-type: none;float: left;}/*设置二级菜单垂直排列效果*/nav ul li ul li {float: none;}/*菜单的链接效果*/nav ul li a {color:#900;text-decoration: none;width: 8em;display: block;text-align: center;line-height: 30px;}/*设置二级菜单背景颜色及隐藏*/nav ul li ul {background-color: #900;background-image:linear-gradient(45deg,#900,#FF2F2F);position: absolute;left: -999em;padding-top: 10px;padding-bottom: 10px;}/*鼠标悬浮在一级菜单时，二级菜单显示，为了防止被别的元素覆盖设置较大的z-index值*/nav ul li:hover ul{left:auto;z-index:9999;}/*二级菜单链接文本颜色*/nav ul li ul li a {color: #FFF;}/*鼠标悬浮一级菜单效果*/nav ul li a:hover {background-color: #900;color: #FFF;}/*鼠标悬浮二级菜单效果*/nav ul li ul li a:hover {background-color: #FF2F2F;}