div+css 纵向导航菜单及二级弹出菜单
浏览数：16 /
时间：2015年06月09日
代码如下：
<html> <head> <style type="text/css"> .menu{width:130px;border:1px solid #ccc;border-bottom:none;} .menu ul{list-style:none;margin:0px;padding:0px;background:#F4F4F4;} .menu ul li {padding:0px 8px;height:26px;border-bottom:1px solid #ccc;line-height:26px;position:relative;} a {text-decoration:none;color:#333333;} .menu ul li:hover{background:#E6E6E6;} .menu ul li ul{display:none;position:absolute;left:130px;top:-1px;width:130px;border:1px solid #ccc;border-bottom:none;} .menu ul li:hover ul {display:block;} </style> </head> <body> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">个人网站</a> <ul> <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> </ul> </li> <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> </div> </body> </html>
主要注意几点：
- 派生选择器的使用
- 避免border边框重复
- 相对定位和绝对定位的使用
测试结果：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
