本文展示了一个使用纯CSS实现的下拉菜单效果，并通过JavaScript增强交互体验。该菜单包括多个层级，展示了如何设置样式和使用JavaScript进行鼠标悬停时的菜单展开。
演示地址: http://www.wowo-design.com/view/51_01/index.htm
<
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;}#nava{...}{display:block;width:80px;text-align:center;}#nava:link{...}{color:#666;text-decoration:none;}#nava:visited{...}{color:#666;text-decoration:none;}#nava:hover{...}{color:#FFF;text-decoration:none;font-weight:bold;}#navli{...}{float:left;width:80px;background:#CCC;}#navlia:hover{...}{background:#999;}#navliul{...}{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:980px;position:absolute;float:left;}#navliulli{...}{float:left;width:80px;background:#F6F6F6;}#navliula{...}{display:block;width:80px;text-align:center;}#navliula:link{...}{color:#666;text-decoration:none;}#navliula:visited{...}{color:#666;text-decoration:none;}#navliula:hover{...}{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}#navli:hoverul{...}{left:0;}#navli.sfhoverul{...}{left:0;}#content{...}{clear:left;}
-->
</
style
>
<
script
type
=text/javascript
>
...
<!--//--><![CDATA[//><!--functionmenuFix()...{varsfEls=document.getElementById("nav").getElementsByTagName("li");for(vari=0;i<sfEls.length;i++)...{sfEls[i].onmouseover=function()...{this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls[i].onMouseDown=function()...{this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls[i].onMouseUp=function()...{this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls[i].onmouseout=function()...{this.className=this.className.replace(newRegExp("(?|^)sfhover/b"),"");}}}window.onload=menuFix;//--><!]]></script></head><body><ulid="nav"><li><ahref="#">产品介绍</a><ul><li><ahref="#">产品一</a></li><li><ahref="#">产品一</a></li><li><ahref="#">产品一</a></li><li><ahref="#">产品一</a></li><li><ahref="#">产品一</a></li><li><ahref="#">产品一</a></li></ul></li><li><ahref="#">服务介绍</a><ul><li><ahref="#">服务二</a></li><li><ahref="#">服务二</a></li><li><ahref="#">服务二</a></li><li><ahref="#">服务二服</a></li><li><ahref="#">服务二服</a></li><li><ahref="#">服务二</a></li></ul></li><li><ahref="#">成功案例</a><ul><li><ahref="#">案例三</a></li><li><ahref="#">案例</a></li><li><ahref="#">案例三案</a></li><li><ahref="#">案例三案</a></li></ul></li><li><ahref="#">关于我们</a><ul><li><ahref="#">我们四</a></li><li><ahref="#">我们四</a></li><li><ahref="#">我们四</a></li><li><ahref="#">我们四111</a></li></ul></li><li><ahref="#">在线演示</a><ul><li><ahref="#">演示</a></li><li><ahref="#">演示</a></li><li><ahref="#">演示</a></li><li><ahref="#">演示演示</a></li><li><ahref="#">演示演示</a></li><li><ahref="#">演示演示</a></li><li><ahref="#">演示演示</a></li><li><ahref="#">演示演示</a></li></ul></li><li><ahref="#">联系我们</a><ul><li><ahref="#">联系联系</a></li><li><ahref="#">联系联系</a></li><li><ahref="#">联系</a></li><li><ahref="#">联系联系</a></li><li><ahref="#">联系联系</a></li><li><ahref="#">联系联系</a></li><li><ahref="#">联系联系</a></li></ul></li></ul></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
