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>

 

主要注意几点：

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

测试结果：

posted on 2014-09-17 11:32  流年半夏  阅读(670)  评论(0)    收藏  举报

导航