HTML鼠标点击按钮按钮下拉(html 鼠标点击)
html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单
html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果。
body内代码为：
UL?id=fm?
LIA?href="#"一级菜单栏目/A?
UL?
LIA?href="#"一级菜单目录/A/LI?
LIA?href="#"一级菜单目录/A/LI?
LIA?href="#"一级菜单目录/A/LI?
LIA?href="#"一级菜单目录/A/LI/UL
/LI?
LIA?href="#"二级菜单栏目/A?
UL?
LIA?href="#"二级菜单目录/A/LI?
LIA?href="#"二级菜单目录/A/LI?
LIA?href="#"二级菜单目录/A/LI?
LIA?href="#"二级菜单目录/A/LI?
LIA?href="#"二级菜单目录/A/LI/UL/LI?
LIA?href="#"三级菜单栏目/A?
UL?
LIA?href="#"三级菜单目录/A/LI?
LIA?href="#"三级菜单目录/A/LI?
LIA?href="#"三级菜单目录/A/LI?
LIA?href="#"三级菜单目录/A/LI
/UL/LI?
LIA?href="#"四级菜单栏目/A?
UL?
LIA?href="#"四级菜单目录/A/LI?
LIA?href="#"四级菜单目录/A/LI?
LIA?href="#"四级菜单目录/A/LI?
LIA?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;?isfEls.length;?i++)?{?
sfEls[i].onmouseover=function()?{?
this.className+=(this.className.length0??"?":?"")?+?"sfhover";?
}?
sfEls[i].onMouseDown=function()?{?
this.className+=(this.className.length0??"?":?"")?+?"sfhover";?
}?
sfEls[i].onMouseUp=function()?{?
this.className+=(this.className.length0??"?":?"")?+?"sfhover";?
}?
sfEls[i].onmouseout=function()?{?
this.className=this.className.replace(new?RegExp("(??|^)sfhover\\b"),?
"");?
}?
}?
}?
window.onload=menuFix;?
/SCRIPT
最后的效果图为：
以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。
在HTML中如何实现点击按钮按照下拉列表框的内容打开相应的页面
用a标签将下拉列表中的项分别包起来然后
a href="想要跳转的网址"下拉选项1/a
a href="想要跳转的网址"下拉选项2/a
a href="想要跳转的网址"下拉选项2/a
html点击弹出下拉列表
跳转到相应的页面。html点击弹出下拉列表选择后跳转到相应的页面。超文本标记语言，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言（或超文本标签语言）的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。