用css制作的导航菜单代码,Css代码库,德仔网

代码语言
代码分类
【Css】用css制作的导航菜单
作者:Dezai.CN / 发布于2012/4/1/ 553
<div><!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"</div>
<div>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div>
<div><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"></div>
<div><head></div>
<div><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></div>
<div><title>css菜单演示</title></div>
<div><style type="text/css"></div>
<div><!--</div>
<div>*{margin:0;padding:0;border:0;}
<div>body {</div>
<div>font-family: arial, 宋体, serif;</div>
<div>    font-size:12px;</div>
<div>}
<div>nav {</div>
<div> line-height: 24px; list-style-type: none; background:#666;</div>
<div>}
<div>nav a {</div>
<div>display: block; width: 80px; text-align:center;</div>
<div>}
<div>nav a:link {</div>
<div>color:#666; text-decoration:none;</div>
<div>}
<div>nav a:visited {</div>
<div>color:#666;text-decoration:none;</div>
<div>}
<div>nav a:hover {</div>
<div>color:#FFF;text-decoration:none;font-weight:bold;</div>
<div>}
<div>nav li {</div>
<div>float: left; width: 80px; background:#CCC;</div>
<div>}
<div>nav li a:hover{</div>
<div>background:#999;</div>
<div>}
<div>nav li ul {</div>
<div>line-height: 27px; list-style-type: none;text-align:left;</div>
<div>left: -999em; width: 180px; position: absolute;</div>
<div>}
<div>nav li ul li{</div>
<div>float: left; width: 180px;</div>
<div>background: #F6F6F6;</div>
<div>}
<div>nav li ul a{</div>
<div>display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;</div>
<div>}
<div>nav li ul a:link {</div>
<div>color:#666; text-decoration:none;</div>
<div>}
<div>nav li ul a:visited {</div>
<div>color:#666;text-decoration:none;</div>
<div>}
<div>nav li ul a:hover {</div>
<div>color:#F3F3F3;text-decoration:none;font-weight:normal;</div>
<div>background:#C00;</div>
<div>}
<div>nav li:hover ul {</div>
<div>left: auto;</div>
<div>}
<div>nav li.sfhover ul {</div>
<div>left: auto;</div>
<div>}
<div>content {</div>
<div>clear: left;</div>
<div>}
<div>--></div>
<div></style></div>
<div><script type=text/javascript><!--//--><![CDATA[//><!--</div>
<div>function menuFix() {</div>
<div>var sfEls = document.getElementById("nav").getElementsByTagName("li");</div>
<div>for (var i=0; i<sfEls.length; i++) {</div>
<div> sfEls[i].onmouseover=function() {</div>
<div> this.className+=(this.className.length>0? " ": "") + "sfhover";</div>
<div> }
<div> sfEls[i].onMouseDown=function() {</div>
<div> this.className+=(this.className.length>0? " ": "") + "sfhover";</div>
<div> }
<div> sfEls[i].onMouseUp=function() {</div>
<div> this.className+=(this.className.length>0? " ": "") + "sfhover";</div>
<div> }
<div> sfEls[i].onmouseout=function() {</div>
<div> this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),</div>
<div>"");</div>
<div> }
<div>}
<div>}
<div>window.onload=menuFix;</div>
<div>//--><!]]></script></div>
<div></head></div>
<div><body></div>
<div><ul id="nav"></div>
<div><li><a href="#">产品介绍</a></div>
<div><ul></div>
<div><li><a href="#">产品一</a></li></div>
<div><li><a href="#">产品一</a></li></div>
<div><li><a href="#">产品一</a></li></div>
<div><li><a href="#">产品一</a></li></div>
<div><li><a href="#">产品一</a></li></div>
<div><li><a href="#">产品一</a></li></div>
<div></ul></div>
<div></li></div>
<div><li><a href="#">服务介绍</a></div>
<div><ul></div>
<div><li><a href="#">服务二</a></li></div>
<div><li><a href="#">服务二</a></li></div>
<div><li><a href="#">服务二</a></li></div>
<div><li><a href="#">服务二服务二</a></li></div>
<div><li><a href="#">服务二服务二服务二</a></li></div>
<div><li><a href="#">服务二</a></li></div>
<div></ul></div>
<div></li></div>
<div><li><a href="#">成功案例</a></div>
<div><ul></div>
<div><li><a href="#">案例三</a></li></div>
<div><li><a href="#">案例</a></li></div>
<div><li><a href="#">案例三案例三</a></li></div>
<div><li><a href="#">案例三案例三案例三</a></li></div>
<div></ul></div>
<div></li></div>
<div><li><a href="#">关于我们</a></div>
<div><ul></div>
<div><li><a href="#">我们四</a></li></div>
<div><li><a href="#">我们四</a></li></div>
<div><li><a href="#">我们四</a></li></div>
<div><li><a href="#">我们四111</a></li></div>
<div></ul></div>
<div></li></div>
<div><li><a href="#">在线演示</a></div>
<div><ul></div>
<div><li><a href="#">演示</a></li></div>
<div><li><a href="#">演示</a></li></div>
<div><li><a href="#">演示</a></li></div>
<div><li><a href="#">演示演示演示</a></li></div>
<div><li><a href="#">演示演示演示</a></li></div>
<div><li><a href="#">演示演示</a></li></div>
<div><li><a href="#">演示演示演示</a></li></div>
<div><li><a href="#">演示演示演示演示演示</a></li></div>
<div></ul></div>
<div></li></div>
<div><li><a href="#">联系我们</a></div>
<div><ul></div>
<div><li><a href="#">联系联系联系联系联系</a></li></div>
<div><li><a href="#">联系联系联系</a></li></div>
<div><li><a href="#">联系</a></li></div>
<div><li><a href="#">联系联系</a></li></div>
<div><li><a href="#">联系联系</a></li></div>
<div><li><a href="#">联系联系联系</a></li></div>
<div><li><a href="#">联系联系联系</a></li></div>
<div></ul></div>
<div></li></div>
<div></ul></div>
<div><div style="clear:both;">看看这一行内容会不会被挤跑－－www.aa25.cn</div></div>
<div></body></div>
<div></html></div>
试试其它关键字
　导航菜单　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)