html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单
3个回答
展开全部
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>
最后的效果图为：
以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
比较好的方法是用JS做，但是非要用CSS呢，也可以
首先 一般HTML中的动态效果都是JS做的，不太推荐用CSS完成
dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #f5f5f5;
}首先定义一个 dropdown的类 然后定义 HOVER的伪类实现一些特效
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;}
.nav>li{float: left;margin:10px}
.menu{display: none;}
</style>
</head>
<body>
<ul class="nav">
<li>图站精选
<ul class="menu">
<li>是对是对</li>
<li>发生地方是</li>
<li>是对方式</li>
</ul>
</li>
<li >H绅士道
<ul class="menu">
<li>是对是对</li>
<li>是滴是滴</li>
<li>是对是对</li>
</ul>
</li>
</ul>
<script>
var navli=document.querySelectorAll('.nav>li')
var menu=document.querySelectorAll('.nav .menu')
navli.forEach(function(item,index){
item.onmouseenter=function(){
menu[index].style.display='block'
}
item.onmouseleave=function(){
setTimeout(function(){
menu[index].style.display='none'
},500)
}
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;}
.nav>li{float: left;margin:10px}
.menu{display: none;}
</style>
</head>
<body>
<ul class="nav">
<li>图站精选
<ul class="menu">
<li>是对是对</li>
<li>发生地方是</li>
<li>是对方式</li>
</ul>
</li>
<li >H绅士道
<ul class="menu">
<li>是对是对</li>
<li>是滴是滴</li>
<li>是对是对</li>
</ul>
</li>
</ul>
<script>
var navli=document.querySelectorAll('.nav>li')
var menu=document.querySelectorAll('.nav .menu')
navli.forEach(function(item,index){
item.onmouseenter=function(){
menu[index].style.display='block'
}
item.onmouseleave=function(){
setTimeout(function(){
menu[index].style.display='none'
},500)
}
})
</script>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
