html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单 css导航栏鼠标hover的时候就出现下拉菜单是怎么做的？
HTML\u4e2d\u9f20\u6807\u60ac\u6d6e\u65f6\u7684\u4e0b\u62c9\u83dc\u5355\u7528CSS\u600e\u4e48\u505a\u8fd9\u4e2a\u4f60\u9700\u8981\u7528\u5230\u4f2a\u7c7b :hover
:hover \u4f2a\u7c7b\u5728\u9f20\u6807\u79fb\u5230\u5143\u7d20\u4e0a\u65f6\u5411\u6b64\u5143\u7d20\u6dfb\u52a0\u7279\u6b8a\u7684\u6837\u5f0f\u3002
\u4f8b\u5b501
a:hover {color: #FF00FF}\u5ef6\u65f6\u6587\u672c\u5f53\u9f20\u6807\u79fb\u52a8\u5230a\u6807\u7b7e\u4e0a\u7684\u65f6\u5019\uff0c\u6539\u53d8a\u6807\u7b7e\u7684\u6587\u5b57\u989c\u8272\u6df1\u5165\u7528\u6cd5\uff0c\u5f53\u79fb\u52a8\u5230\u67d0\u6807\u7b7e\u7684\u65f6\u5019\u6539\u53d8\u5176\u5b83\u6807\u7b7e\u7684\u6837\u5f0f\uff1a
\u4f8b\u5b50\uff1a
\u83dc\u5355 \u5f39\u51fa\u83dc\u53551 \u5f39\u51fa\u83dc\u53552 .tanchucaidan{ display:none;} /*\u8bbe\u7f6e\u5f39\u51fa\u83dc\u5355\u9ed8\u8ba4\u9690\u85cf*/.dingjicaidan li:hover ul{ display:block;} /*\u5f53\u9f20\u6807\u79fb\u52a8\u5230dingjicaidan\u4e0b\u7684li\u6807\u7b7e\u65f6\uff0c\u6539\u53d8li\u4e0b\u7684ul\u6807\u7b7e\u7684display\u5c5e\u6027\uff08\u663e\u793a\u51fa\u6765\uff09*/\u5176\u5b9e\u5c31\u8fd9\u4e48\u7b80\u5355\uff0c\u81ea\u5df1\u7422\u78e8\u4e0b\u5427\uff0c\u7eaf\u624b\u6253\uff0c\u671b\u91c7\u7eb3\uff01
\u7a0b\u5e8f\u8f93\u5165\u5982\u4e0b\uff1a
......#menu{overflow:hidden;height:20px;}#menu:hover {height:100px;}
\u9009\u62e9\u9f20\u6807\u6307\u9488\u6d6e\u52a8\u5728\u5176\u4e0a\u7684\u5143\u7d20\uff0c\u5e76\u8bbe\u7f6e\u5176\u6837\u5f0f\uff1a
a:hover{ background-color:yellow;}
\u5bf9\u4e8eHTML \u90e8\u5206\uff1a
\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55\u7684 HTML \u5143\u7d20\u6765\u6253\u5f00\u4e0b\u62c9\u83dc\u5355\uff0c\u5982\uff1a, \u6216 a \u5143\u7d20\u3002\u4f7f\u7528\u5bb9\u5668\u5143\u7d20 (\u5982\uff1a ) \u6765\u521b\u5efa\u4e0b\u62c9\u83dc\u5355\u7684\u5185\u5bb9\uff0c\u5e76\u653e\u5728\u4efb\u4f55\u4f60\u60f3\u653e\u7684\u4f4d\u7f6e\u4e0a\u3002\u4f7f\u7528 \u5143\u7d20\u6765\u5305\u88f9\u8fd9\u4e9b\u5143\u7d20\uff0c\u5e76\u4f7f\u7528 CSS \u6765\u8bbe\u7f6e\u4e0b\u62c9\u5185\u5bb9\u7684\u6837\u5f0f\u3002
\u5bf9\u4e8eCSS \u90e8\u5206\uff1a
.dropdown \u7c7b\u4f7f\u7528 position:relative, \u8fd9\u5c06\u8bbe\u7f6e\u4e0b\u62c9\u83dc\u5355\u7684\u5185\u5bb9\u653e\u7f6e\u5728\u4e0b\u62c9\u6309\u94ae (\u4f7f\u7528 position:absolute) \u7684\u53f3\u4e0b\u89d2\u4f4d\u7f6e\u3002
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鼠标悬浮出现图片 ... html鼠标悬停下拉菜单 ... html鼠标移入显示隐藏菜单 ... 鼠标悬停出现下拉菜单 ... 鼠标左侧两个按键设置 ... 罗技g502鼠标键位图 ... 网易mc怎么调出鼠标 ... dw怎么让鼠标悬停显示菜单 ...
