代码如下:<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>css菜单演示</title></p> <p><style type="text/css"><br /> <!--<br /> *{margin:0;padding:0;border:0;}<br /> body {<br /> font-family: arial, 宋体, serif;<br /> font-size:12px;<br /> }</p> <p>#nav {<br /> line-height: 24px; list-style-type: none; background:#666;<br /> }<br /> #nav a {<br /> display: block; width: 80px; text-align:center;<br /> }<br /> #nav a:link {<br /> color:#666; text-decoration:none;<br /> }<br /> #nav a:visited {<br /> color:#666;text-decoration:none;<br /> }<br /> #nav a:hover {<br /> color:#FFF;text-decoration:none;font-weight:bold;<br /> }<br /> #nav li {<br /> float: left; width: 80px; background:#CCC;<br /> }<br /> #nav li a:hover{<br /> background:#999;<br /> }<br /> #nav li ul {<br /> line-height: 27px; list-style-type: none;text-align:left;<br /> left: -999em; width: 180px; position: absolute;<br /> }<br /> #nav li ul li{<br /> float: left; width: 180px;<br /> background: #F6F6F6;<br /> }</p> <p>#nav li ul a{<br /> display: block; width: 156px;text-align:left;padding-left:24px;<br /> }<br /> #nav li ul a:link {<br /> color:#666; text-decoration:none;<br /> }<br /> #nav li ul a:visited {<br /> color:#666;text-decoration:none;<br /> }<br /> #nav li ul a:hover {<br /> color:#F3F3F3;text-decoration:none;font-weight:normal;<br /> background:#C00;<br /> }<br /> #nav li:hover ul {<br /> left: auto;<br /> }<br /> #nav li.sfhover ul {<br /> left: auto;<br /> }<br /> #content {<br /> clear: left;<br /> }</p> <p>--><br /> </style><br /> <script type=text/javascript><!--//--><![CDATA[//><!--<br /> function menuFix() {<br /> var sfEls = document.getElementById("nav").getElementsByTagName("li");<br /> for (var i=0; i<sfEls.length; i++) {<br /> sfEls[i].onmouseover=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onMouseDown=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onMouseUp=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onmouseout=function() {<br /> this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),<br /> "");<br /> }<br /> }<br /> }<br /> window.onload=menuFix;<br /> //--><!]]></script><br /> </head><br /> <body></p> <p><ul id="nav"><br /> <li><a href="#">产品介绍</a><br /> <ul><br /> <li><a href="#">产品一</a></li><br /> <li><a href="#">产品一</a></li><br /> <li><a href="#">产品一</a></li><br /> <li><a href="#">产品一</a></li><br /> <li><a href="#">产品一</a></li><br /> <li><a href="#">产品一</a></li><br /> </ul><br /> </li><br /> <li><a href="#">服务介绍</a><br /> <ul><br /> <li><a href="#">服务二</a></li><br /> <li><a href="#">服务二</a></li><br /> <li><a href="#">服务二</a></li><br /> <li><a href="#">服务二服务二</a></li><br /> <li><a href="#">服务二服务二服务二</a></li><br /> <li><a href="#">服务二</a></li><br /> </ul><br /> </li><br /> <li><a href="#">成功案例</a><br /> <ul><br /> <li><a href="#">案例三</a></li><br /> <li><a href="#">案例</a></li><br /> <li><a href="#">案例三案例三</a></li><br /> <li><a href="#">案例三案例三案例三</a></li><br /> </ul><br /> </li><br /> <li><a href="#">关于我们</a><br /> <ul><br /> <li><a href="#">我们四</a></li><br /> <li><a href="#">我们四</a></li><br /> <li><a href="#">我们四</a></li><br /> <li><a href="#">我们四111</a></li><br /> </ul><br /> </li><br /> <li><a href="#">在线演示</a><br /> <ul><br /> <li><a href="#">演示</a></li><br /> <li><a href="#">演示</a></li><br /> <li><a href="#">演示</a></li><br /> <li><a href="#">演示演示演示</a></li><br /> <li><a href="#">演示演示演示</a></li><br /> <li><a href="#">演示演示</a></li><br /> <li><a href="#">演示演示演示</a></li><br /> <li><a href="#">演示演示演示演示演示</a></li><br /> </ul><br /> </li><br /> <li><a href="#">联系我们</a><br /> <ul><br /> <li><a href="#">联系联系联系联系联系</a></li><br /> <li><a href="#">联系联系联系</a></li><br /> <li><a href="#">联系</a></li><br /> <li><a href="#">联系联系</a></li><br /> <li><a href="#">联系联系</a></li><br /> <li><a href="#">联系联系联系</a></li><br /> <li><a href="#">联系联系联系</a></li><br /> </ul><br /> </li><br /> </ul><br /> </body><br /> </html> [Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
This page contains a single entry by Sky published on July 29, 2005 1:45 PM.
如何获得javascript各种对象（可当参考用） was the previous entry in this blog.
[转载]怎样起英文名 is the next entry in this blog.
Find recent content on the main index or look in the archives to find all content.
