纯CSS菜单,可自行加背景图美化

更新时间：2009年05月09日点击数：

<!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;}

.nav li a {width:120px;display:block;height:16px;padding:5px 0 1px;_border:solid #ccc;_border-width:1px 0;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
.nav li:hover a,
.nav li a:hover {font-weight:bold;color:red;}
.nav li:hover li {border:0;}
.nav li li a,
.nav li:hover li a {_border:0;font-weight:normal;color:#555;}
.nav li li a:hover {color:red;font-weight:normal;}

-->
</style>  
</head>

赞助商链接

炫友推荐

炫浪推广

【注意】炫浪网版权所有,未经书面授权禁止模仿风格或建立镜像网站.如有违反,追究法律责任.
【声明】本网站部分内容属社区网友发布，本网站仅提供网友交流平台，但有权在本网站范围内引用、发布、
转载来自社区网友发布的内容。网友发布内容纯属个人行为，与本网站立场无关。本网站对于网友发布的
内容所引发的版权、署名权的异议及纠纷，不承担任何责任。粤ICP备11064832号公安备案编号：4453023010550