Loading
0

纯CSS二级下拉导航菜单

纯CSS实现二级下拉导航菜单。

演示地址:戳我进入

代码如下:


<!DOCTYPE html>
<html>
<head>
<title>纯CSS二级导航栏</title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
}

body{
background:#FFF;
}

a{
text-decoration:none;
}

.nav{
width:500px;
height:200px;
margin:100px auto 0 auto;
text-align:center;
}

.nav ul{
float:left;
}

.nav ul li{
float:left;
width:60px;
line-height:40px;
position:relative;
background-color:#F8F8F8;
}

.nav .nav_first{
border-left:1px dotted #EAEAEA;
}

.nav ul li a{
color:#666;
display:block;
font-family:Microsoft YaHei;
border:1px dotted #EAEAEA;
border-left:none;
}

.nav ul li a:hover{
color:#000;
}

.nav ul li .active{
background-color:#D8450B;
border:1px solid #D8450B;
color:#EEE;
}

.nav ul li .active:hover{
background-color:#D8450B;
color:#EEE;
}

.nav ul li:hover .sub_nav{
display:block;
}

.nav .sub_nav{
position:absolute;
width:90px;
display:none;
left:-1px;
}

.nav .sub_nav li{
text-align:left;
width:100px;
}

.nav .sub_nav b{
width:15px;
background-color:#CCC;
display:inline-block;
margin-right:15px;
}

.nav .sub_nav li a{
border-top:none;
}

.nav .sub_nav li .sub_nav_last{
border-bottom:none;
}

.nav .sub_nav li a:hover b{
background-color:#999;
}

.nav .sub_nav li .sub_active{

}

.nav .caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-color: #777777;
margin-left:5px;
}

</style>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a href="http://www.liuguodong.net" class="active nav_first">首页</a></li>
<li><a href="http://www.liuguodong.net">模版<div class="caret"></div></a>
<ul class="sub_nav">
<li><a href="http://www.liuguodong.net" class="sub_active"><b>&nbsp;</b>博客模板</a></li>
<li><a href="http://www.liuguodong.net"><b>&nbsp;</b>企业模板</a></li>
<li><a href="http://www.liuguodong.net"><b>&nbsp;</b>商城模板</a></li>
</ul>
</li>
<li><a href="http://www.liuguodong.net">前端<div class="caret"></div></a>
<ul class="sub_nav">
<li><a href="http://www.liuguodong.net" class="sub_active"><b>&nbsp;</b>HTML</a></li>
<li><a href="http://www.liuguodong.net"><b>&nbsp;</b>CSS</a></li>
<li><a href="http://www.liuguodong.net"><b>&nbsp;</b>JS</a></li>

</ul>
</li>
<li><a href="http://www.liuguodong.net">日记</a></li>
<li><a href="http://www.liuguodong.net">相册</a></li>
<li><a href="http://www.liuguodong.net">留言</a></li>
</ul>
</div>

</body>
</html>

 

声明:本文为原创,作者为 刘国栋,转载时请保留本声明及附带文章链接:http://www.liuguodong.net/392.html

最后编辑于:2016/11/17作者: 刘国栋

刘国栋

刘国栋个人博客,是记录博主学习和成长的个人博客网站,关注于web前端和WordPress经验与技巧方面的学习和分享,也会分享一些优秀的个人博客模版。

还没回应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

扫一扫关注刘国栋个人博客

扫一扫关注刘国栋个人博客