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做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。

假设每个标签的单位是li标签，li要设置overflow:hidden，并且li要有一个的高度。

li下边要添加一个div，给他个class叫child。给他个属性transtion: transform 2s(多少s是希望多少秒完成动画)

child里面再画两个div，这两个div高度等于li的高度。这时候你只能看到一个div，因为下边的超出隐藏了。

li:hover child {

trasfrom: tranlateY(这里写一个li的高度，看情况是正直值还是负值。应该是正数)

}

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

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

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

发表评论

评论列表（0条）