css菜单演示
分类：电脑知识 发表于：2010-08-07 13:47:41 评论(7)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {font-family: arial, 宋体, serif; font-size:12px;}
#nav {line-height: 24px; list-style-type: none; background:#666;}
#nav a {display: block; width: 80px; text-align:center;}
#nav a:link {color:#666; text-decoration:none;}
#nav a:visited {color:#666;text-decoration:none;}
#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}
#nav li {float: left; width: 80px; background:#CCC;}
#nav li a:hover{background:#999;}
#nav li ul {line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; }
#nav li ul li{float: left; width: 80px; background: #F6F6F6; }
#nav li ul a{display: block; width: 80px;text-align:left;padding-left:22px;}
#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
-->
</style>
</head>
<body>
<ul id="nav">
<li onmouseover="this.className=´sfhover´" onmouseout="this.className=´´"><a href="#">演示一</a>
<ul>
<li><a href="#">演示一</a></li>
<li><a href="#">演示一</a></li>
<li><a href="#">演示一</a></li>
<li><a href="#">演示一</a></li>
</ul>
</li>
<li onmouseover="this.className=´sfhover´" onmouseout="this.className=´´"><a href="#">演示二</a>
<ul>
<li><a href="#">演示二</a></li>
<li><a href="#">演示二</a></li>
<li><a href="#">演示二</a></li>
<li><a href="#">演示二</a></li>
</ul>
</li>
<li onmouseover="this.className=´sfhover´" onmouseout="this.className=´´"><a href="#">演示三</a>
<ul>
<li><a href="#">演示三</a></li>
<li><a href="#">演示三</a></li>
<li><a href="#">演示三</a></li>
<li><a href="#">演示三</a></li>
</ul>
</li>
</ul>
</body>
</html>
(2010-08-09 08:43:10)
