HTML中鼠标悬浮时的下拉菜单用CSS怎么做 html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单
HTML\u4e2d\u9f20\u6807\u60ac\u6d6e\u65f6\u7684\u4e0b\u62c9\u83dc\u5355\u7528CSS\u600e\u4e48\u505a\u6700\u597d\u662f\u7528JS\u505a\uff0c\u4f46\u662f\u975e\u8981\u7528CSS\u5462\uff0c\u4e5f\u53ef\u4ee5\u3002\u5982\u4e0b\u662f\u6211\u4ee5\u524d\u5199\u7684\u4e00\u4e2aCSS\u4e0b\u62c9\uff0c\u4f60\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b\uff1a
*{margin:0;padding: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:2px;float:left;margin-right:5px;}#nav li ul{position:absolute;left:10px;top:20px;display:none;width:100px;}#nav li:hover ul{display:block;}\u9996\u9875\u5173\u4e8e\u6211\u4eec\u6211\u4eec\u7684\u6545\u4e8b\u6211\u4eec\u7684\u56e2\u961f\u6211\u4eec\u7684\u670d\u52a1\u7f51\u9875\u8bbe\u8ba1\u9875\u9762\u5236\u4f5c\u7a0b\u5e8f\u5f00\u53d1\u8054\u7cfb\u6211\u4eec\u56e2\u961f\u4e3b\u529b\u56e2\u961f\u6210\u5458
html\u505a\u9f20\u6807\u60ac\u6d6e\u83dc\u5355\u4e0a\u7684\u9009\u9879\u80fd\u51fa\u73b0\u4e0b\u62c9\u83dc\u5355\uff0cCSS+JS\u505a\u51fa\u6b64\u6548\u679c\u3002
\u5185\u4ee3\u7801\u4e3a\uff1a
\u4e00\u7ea7\u83dc\u5355\u680f\u76ee \u4e00\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e00\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e00\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e00\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e8c\u7ea7\u83dc\u5355\u680f\u76ee \u4e8c\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e8c\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e8c\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e8c\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e8c\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e09\u7ea7\u83dc\u5355\u680f\u76ee \u4e09\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e09\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e09\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e09\u7ea7\u83dc\u5355\u76ee\u5f55 \u56db\u7ea7\u83dc\u5355\u680f\u76ee \u56db\u7ea7\u83dc\u5355\u76ee\u5f55 \u56db\u7ea7\u83dc\u5355\u76ee\u5f55 \u56db\u7ea7\u83dc\u5355\u76ee\u5f55 \u56db\u7ea7\u83dc\u5355\u76ee\u5f55 \u4e3a\u4e86\u7a81\u51fa\u6548\u679c\uff0c\u505a\u7684CSS\u6837\u5f0f\u4ee3\u7801\u4e3a\uff1a
*{margin:0;padding:0;border:0;}#fm { line-height: 24px; list-style-type: none; background:#666; }/*\u8bbe\u7f6e\u76d2\u5b50\u7684\u884c\u9ad8\uff0c\u53bb\u6389\u6807\u8bb0\uff0c\u8bbe\u7f6e\u80cc\u666f\u989c\u8272*/#fm a { display: block; width: 80px; text-align:center; }/*\u8bbe\u7f6eA\u6807\u7b7e\u4e3a\u5757\u5143\u7d20\u4e0d\u663e\u793a\uff0c\u5bbd\u5ea6\uff0c\u5c45\u4e2d*/#fm a:link { color:#666; text-decoration:none; } /* \u8bbe\u7f6e\u672a\u8bbf\u95ee\u7684\u94fe\u63a5\u6837\u5f0f*/#fm a:visited { color:#666;text-decoration:none; } /* \u8bbe\u7f6e\u5df2\u8bbf\u95ee\u7684\u94fe\u63a5\u6837\u5f0f */#fm a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /* \u5f53\u6709\u9f20\u6807\u60ac\u505c\u5728\u94fe\u63a5\u4e0a\u7684\u989c\u8272 */#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; } js\u4ee3\u7801\u4e3a\uff1a
function menuFix() { var sfEls = document.getElementById("fm").getElementsByTagName("li"); for (var i=0; i0? " ": "") + "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; \u6700\u540e\u7684\u6548\u679c\u56fe\u4e3a\uff1a
\u4ee5\u4e0a\u5c31\u662f\u7528html\u505a\u9f20\u6807\u60ac\u6d6e\u83dc\u5355\u4e0a\u7684\u9009\u9879\u80fd\u51fa\u73b0\u4e0b\u62c9\u83dc\u5355\u7684\u89e3\u51b3\u65b9\u6cd5\u3002
这个你需要用到伪类 :hover
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
例子1
<style>
a:hover {color: #FF00FF}
</style>
<a href="#">延时文本</a>
当鼠标移动到a标签上的时候，改变a标签的文字颜色
深入用法，当移动到某标签的时候改变其它标签的样式：
例子：
<ul class="dingjicaidan">
<li>
<a href="#">
菜单
</a>
<ul class="tanchucaidan">
<li>
弹出菜单1
</li>
<li>
弹出菜单2
</li>
</ul>
</li>
</ul>
<style>
.tanchucaidan{ display:none;} /*设置弹出菜单默认隐藏*/
.dingjicaidan li:hover ul{ display:block;}
/*当鼠标移动到dingjicaidan下的li标签时，改变li下的ul标签的display属性（显示出来）*/
</style>
其实就这么简单，自己琢磨下吧，纯手打，望采纳！
最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：
<html> <head> <title></title> <style>*{margin:0;padding: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:2px;float:left;margin-right:5px; } #nav li ul{ position:absolute; left:10px; top:20px; display:none;width: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>
最好用js，css3可以做。但兼容性有问题
绛旓細<style> .b{display:none;} .a:hover .b{display:block;} </style> <div class="a"> 鎴戞槸鏌愪釜鍦版柟 <div class="b">鎴鐨勪笅鎷夎彍鍗</div> </div>
绛旓細閭ｄ箞榧犳爣鏀惧湪鎸夐挳澶栭儴鍜屼笂涓绾х洅瀛愮殑鍐呴儴浠嶇劧鍙互灏嗕笅鎷夊甫鍗曟樉绀猴紝浜庢槸灏濊瘯鍦ㄦ寜閽洅瀛愮殑涓婁竴绾у姞涓婁簡涓涓笌鎸夐挳澶у皬涓鏍风殑鎸夐挳锛屽苟灏嗕笅鎷夎彍鍗曢檮鐫浜庢銆傜涓鎯虫硶灏辨槸缁欐湭鏄剧ず锛堥粯璁ら殣钘忔椂锛鐨勪笅鎷夎彍鍗曟爮娣诲姞锛屽叾缁撴灉灏辨槸杈规涓鐩村浜庢樉绀虹姸鎬侊紝鍦ㄤ笅鎷夎彍鍗曟爮闅愯棌鏃舵棤娉曢殣钘忋傝В鍐虫柟娉曞氨鏄皢杈规鐨勫睘鎬у姞鍦...
绛旓細3銆佸垱寤烘柊缃戦〉鍚庯紝鍗曞嚮鈥滆璁♀濋〉涓婄殑鈥滄彃鍏-琛ㄥ崟-閫夋嫨锛堝垪琛/鑿滃崟锛夆濅互鎻掑叆鍙夋嫨鐨勪笅鎷琛ㄥ崟銆4銆佹垨鑰呭湪鑿滃崟鏍忎笅鏈変竴涓〃鍗曢夐」鍥炬爣銆傚皢榧犳爣鏀惧湪涓婇潰鏄剧ず鈥滈夋嫨锛堝垪琛/鑿滃崟锛夆濆苟鍗曞嚮瀹冿紝鎴栨彃鍏涓嬫媺鑿滃崟銆5銆佺劧鍚庡脊鍑烘帴鍙ｏ紝鎮ㄩ渶瑕佽緭鍏ユ爣璁拌緟鍔╁嚱鏁扮殑灞炴с傜敤鑻辨枃鎴栨暟瀛楀～鍐欒韩浠借瘉銆傛爣璁版槸涓嬫媺鑿滃崟鐨...
绛旓細} </style></head><body><ul id="uid"> <li class="main"><a href="#">鑿滃崟涓</a> <ul> <li><a href="#">瀛愯彍鍗</a></li> <li><a href="#">瀛愯彍鍗</a></li> <li><a href="#">瀛愯彍鍗</a></li> </ul> </li> <li class="main"...
绛旓細鍥炵瓟锛.botton2:hover .zcd{display:block;} 浣犲啓鐨勬槸.zcd闅愯棌銆傞偅涔榧犳爣绉讳笂鍘诲悗鏄剧ず鐨勪篃搴旇鏄畠,鑰屼笉鏄瓙鍏冪礌銆 鍙﹀, .botton2:hover .zcd 涓環over鍜.zcd涔嬮棿鏄湁绌烘牸鐨
绛旓細<ul><li id="lis" class="lis"><a id="link" href="#">寰崥</a> <ul id="ul1"> <li>绉佷俊</li> <li>璇勮</li> <li>@鎴</li> </ul> </li></ul><script>window.onload = function (){var li = document.getElementById('lis');var ul = document....
绛旓細鏈変釜onmouse灞炴
绛旓細浣犺鐨勬槸鎶榧犳爣鎼佺疆鍦ㄦ煇涓帶浠朵笂鍋滅暀涓浼氾紝鐒跺悗寮瑰嚭蹇嵎鑿滃崟鍚楋紵鍏跺疄鎴戞棤褰腑宸茬粡鍛婅瘔浣犲姙娉曚簡锛岄紶鏍囦簨浠堕夋嫨鈥滆浇鍏モ濇垨鑰呪滄樉绀衡濓紝浜嬩欢浠ｇ爜灏辨槸鈥滃脊鍑哄揩鎹疯彍鍗曗濆苟鍐欎笂蹇嵎鑿滃崟鏄剧ず鍐呭
绛旓細杩欎釜闇瑕佺敤鍒 JavaScript 鑴氭湰璇█銆傜粰浣犱釜闈炲父璇︾粏鐨勬暀绋嬩互鍙婄ず渚嬶細http://www.myfootprints.cn/blog/post/15.html 鎽樿锛氭瀯寤虹綉椤涓嬫媺鑿滃崟 鏈枃鎻愪緵浜嗕竴涓瀯寤虹綉椤典笅鎷夎彍鍗曠殑瑙ｅ喅鏂规銆傛鏂规鐨勭粨鏋勫彲浠ュ緢鏂逛究鐨勯噸鐢紝鍥犱负瀹冨皢缃戦〉鐨勭粨鏋勩佺綉椤电殑琛屼负銆佺綉椤电殑澶栬鍒嗗紑浜嗐傜綉椤电殑缁撴瀯浣跨敤HTML鏂囦欢鏋勫缓锛岃...
绛旓細<div> <ul> <li>涓绾鑿滃崟 <div> <ul> <li>浜岀骇鑿滃崟</li> </ul> </div> </li> </ul> </div> 涓涓洅瀛愰噷闈㈠涓涓洅瀛愶紝鍦ㄦ妸甯冨眬鍋氱殑缇庤鐐瑰氨濂戒簡銆傚鏋滄兂妯」鎺掑垪鐨勮瘽鍙互璁╀竴绾ц彍鍗昮loat锛歭eft 宸︽诞鍔 锛屼簩绾ц彍鍗曞畾涔変负琛屽潡绾 鍦ㄤ竴绾ц彍鍗曚笅锛屽湪璁剧疆涓洪殣钘忥紝榧犳爣hover鏃跺欐樉绀猴紝鍐...
