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>

 

主要注意几点：

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

测试结果：

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 html 使用 log si display it class style 代码 html 使用 log si display it

相关文章

随机文章

您可能还喜欢

您可能还喜欢