Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-10 12:32:52

二级导航条 hover导航条导航代码下拉导航条

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>纯CSS菜单</title>  
<style type="text/css">
<!-- /*  */
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}

/* 设置table宽度、边框为0、(IE6) */
.nav ul table {width:100%;border-collapse:collapse;border:0;}
/* 默认隐藏下一级ul列表 */
.nav ul li ul {display:none;}
/* 当鼠标经过时显示下一级ul列表 */
.nav ul li:hover ul,
.nav ul li a:hover ul {display:block;width:100%;}
/* 好久没玩...结果不知道哪出错了，不加粗就是不行。哪位有深入研究滴请详解~谢 */
.nav li a:hover {font-weight:bold;}

/* ====================== 以上为关键属性 ====================== */

/* ====================== 以下各位随意发挥 ====================== */
/* 修饰样式一 */
.nav li {float:left;width:120px;display:block;font-size:0;border:solid #ccc;border-width:1px 0;_border:0; background:#666666;}

.nav li a {width:120px;display:block;height:25px; line-height:25px; font-weight:bold; padding:5px 0 1px;border:solid #eee 1px;font-size:12px;text-align:center;color:#fff;text-decoration:none;background:#666666;}
.nav li:hover a,
.nav li a:hover {font-weight:bold;color:#fff; background:#FF6600}
.nav li:hover li {border:0;}
.nav li li a,
.nav li:hover li a {_border:0;font-weight:normal;color:#fff; font-weight:bold;}
.nav li li a:hover {color:#fff;font-weight:normal; font-weight:bold; background:#FF9900}

-->
</style>  
</head>

</ul>

</div></body>  
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章：纵向的跳动菜单代码

下一篇文章：超漂亮的CSS网页导航实例