html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单_随笔

html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果。

<body>内代码为：

<LI><A href="#">一级菜单栏目</A>

<UL>

<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></UL></LI>

<LI><A href="#">三级菜单栏目</A>

<UL>

<LI><A href="#">三级菜单目录</A></LI>

</UL></LI>

<LI><A href="#">四级菜单栏目</A>

<UL>

<LI><A href="#">四级菜单目录</A></LI>

<LI><A href="#">四级菜单目录</A></LI></UL></LI>

</UL></LI></UL>

为了突出效果，做的CSS样式代码为：

*{margin:0padding:0border: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:#666text-decoration:none } /* 设置已访问的链接样式 */

#fm a:hover { color:#FFFtext-decoration:nonefont-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: nonetext-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: 80pxwidth: 80pxtext-align:leftpadding-left:5px }

#fm li ul a:link { color:#666 text-decoration:none }

#fm li ul a:visited { color:#666text-decoration:none }

#fm li ul a:hover { color:#F3F3F3text-decoration:nonefont-weight:normal background:#C00 }

#fm li:hover ul { left: auto }

#fm li.sfhover ul { left: auto }

#content { clear: left }

</STYLE>

js代码为：

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>

最后的效果图为：

以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：

<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6114159.html

html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

发表评论

评论列表（0条）