纯css实现二级导航菜单效果

时间：2015-06-28 00:00:00 编辑：简简单单来源：转载

提示：您可以先修改部分代码再运行

HTML代码如下

<style>
#nav{
float:left;
margin-left:10px;
margin-top:20px;
}
#nav dl{
float:left;
font-size:14px;
padding-left:5px;
position:relative;
}
#nav dt{
float:left;
display:block;
width:48px;
height:auto;
text-align: center;
line-height:30px;
}
#nav dt a{
color:#999999;
}
 
#nav dl  .first{
color:#fff;
font-weight:bold;
}
#nav .line{
float:left;
margin-top:6px;
margin-left:4px;
}
#nav .triangle{
display:none;
background:url(/background_img/1.jpg);
width:21px;
height:13px;
background-position:-256px -11px;
position:relative;
top:41px;
left:14px;
}
#nav dt:hover{
background:#fff;
}
#nav dt:hover a{
color:#000;
}
#nav ul{
display:none;
width:auto;
min-width:90px;
height:auto;
/*outline: 1px solid #000;*/
border:1px solid #000;
border-top:0;
position:absolute;
left:4px;
z-index:2;
 
}
#nav ul .tip{
margin-top:10px;
}
#nav li{
width:auto;
margin:6px 4px;
}
#nav li:hover{
background:#555555;
}
#nav li:hover a{
color:#fff;
}
#nav dt:hover ul{
display:block;
background:#fff;
}

</style>

提示：您可以先修改部分代码再运行

上一篇： Android fragment使用方法与注意事项
下一篇： Nginx用ngx_cache_purge模块缓存加速支持html伪静态页面

推荐专题

最新下载

热门教程

纯css实现二级导航菜单效果

相关文章

网站留言

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程