码迷,mamicode.com
首页 > Web开发 > 详细

div+css 纵向导航菜单及二级弹出菜单

时间:2014-09-17 13:22:12      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   使用   ar   div   sp   

代码如下:

<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>

 

主要注意几点:

  1. 派生选择器的使用
  2. 避免border边框重复
  3. 相对定位和绝对定位的使用

测试结果:

div+css 纵向导航菜单及二级弹出菜单

标签:style   blog   color   io   os   使用   ar   div   sp   

原文地址:http://www.cnblogs.com/zxiaozhang/p/3976749.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!