html做鼠标悬浮菜单上的选项能出现下拉菜单,CSS+JS做出此效果。
<body>内代码为:
<UL id=fm>
<LI><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><A href="#">二级菜单栏目</A>
<UL>
<LI><A href="#">二级菜单目录</A></LI>
<LI><A href="#">二级菜单目录</A></LI>
<LI><A href="#">二级菜单目录</A></LI>
<LI><A href="#">二级菜单目录</A></LI>
<LI><A href="#">二级菜单目录</A></LI></UL></LI>
<LI><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><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></LI></UL>
为了突出效果,做的CSS样式代码为:
<STYLE type=text/css>
*{margin:0;padding:0;border:0;}
#fm { line-height: 24px; list-style-type: none; background:#666; }/*设置盒子的行高,去掉标记,设置背景颜色*/
#fm a { display: block; width: 80px; text-align:center; }/*设置A标签为块元素不显示,宽度,居中*/
#fm a:link { color:#666; text-decoration:none; } /* 设置未访问的链接样式*/
#fm a:visited { color:#666;text-decoration:none; } /* 设置已访问的链接样式 */
#fm a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /* 当有鼠标悬停在链接上的颜色 */
#fm li { float: left; width: 150px; background:#CCC; }
#fm li a:hover{ background:#999; }
#fm li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; }
#fm li ul li{ float: left; width: 80px; background: #F6F6F6; }
#fm li ul a{ display: block; width: 80px;width: 80px;text-align:left;padding-left:5px; }
#fm li ul a:link { color:#666; text-decoration:none; }
#fm li ul a:visited { color:#666;text-decoration:none; }
#fm li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; }
#fm li:hover ul { left: auto; }
#fm li.sfhover ul { left: auto; }
#content { clear: left; }
</STYLE>
js代码为:
<SCRIPT type=text/javascript>
function menuFix() {
var sfEls = document.getElementById("fm").getElementsByTagName("li");
for (var i=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(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
</SCRIPT>
最后的效果图为:
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/b21bb051f819861849755efb43ed2e738bd4e69b?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)
以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。