首页 > 代码库 > div+css 纵向导航菜单及二级弹出菜单
div+css 纵向导航菜单及二级弹出菜单
代码如下：
<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边框重复
- 相对定位和绝对定位的使用
测试结果：
<style></style><style></style><style></style><style></style><style></style>- 首页
- 个人网站
- 中华人民共和国
- 中国无产阶级
- 首页
- 首页
- 首页
- 首页
- 首页
- 首页
- 首页
- 首页
- 首页
div+css 纵向导航菜单及二级弹出菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。