二级菜单总结

来源：互联网发布：web前端开发必备软件编辑：程序博客网时间：2024/05/07 05:30

原理：在一个列表的列表项中嵌入另一个（第二级）列表

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}ul li{float: left;list-style: none;}.secNav li{float: none;}ul.secNav{display: none;}.secNav a{background: #B5B5B3;}ul li:hover .secNav {display: block;}ul li a{display: block;width: 6em;height:3em;line-height: 3em;text-align: center;color:#F4F2F2;border-left: 1px solid #c8c8c8;background:#564E4E;text-decoration: none;}</style></head><body><ul><li><a href="#">首页</a></li><li><a href="#">新闻</a><ul class="secNav"><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></div></body></html>

解释及注意事项：

1.注意嵌套，可以为二级ul添加一个类

2.设置margin和padding为0才能让第二级菜单与第一级菜单自动对齐

<pre name="code" class="html">            *{margin: 0;padding: 0;}

3.取消第二级li的浮动，因为第一级设置了float从而变为了横向

<pre name="code" class="html">   .secNav li{             float: none;}

4.隐藏和显示都是针对第二级ul做的操作，同时用第一级的li去hover第二级的ul

<pre name="code" class="html">ul.secNav{display: none;}

<pre name="code" class="html">ul li:hover .secNav {display: block;}

5.用a选择器设置样式可以同时设置字体样式

0 0