<select>
<option value="1">我是下拉项目1</option>
<option value="2">我是下拉项目2</option>
<option value="3">我是下拉项目3</option>
<option value="4">我是下拉项目4</option>
</select>
用js先写个带参方法，参数就是2级联动的对象obj
写个ajax data参数就是objvalue， value传给后台获取数据返回给ajax，
然后ajax做你想做的页面处理。。。
<script language="javascript">
function getData(obj) {
var opt = objoptions[objselectedIndex]
//alert("The option you select is:"+opttext+"("+optvalue+")");
$ajax({
url : "你的url",
type : "Post",
data : 'diqu='+optvalue,
success : function(data1) {
//这里面就可以得到你后台获取过来的数据了，你可以做DOM处理
}
});
}
</script>
<SELECT onchange="getData(this)">
<OPTION value ="1">湖北</OPTION>
<OPTION value="2">湖南</OPTION>
<OPTION value ="3">河北</OPTION>
<OPTION value="4">河南</OPTION>
</SELECT>
html代码如下：
<form action="" method="get">
<label>1、普通下拉列表菜单</label>
<select name="">
<option value="0">DIVCSS5</option>
<option value="1">DIVCSS5</option>
</select>
</form>
2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）
常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
跳转菜单html代码如下：
<form action="" method="get">
<label>2、跳转的下拉列表菜单</label>
<select name="jumpMenu" id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)">
<option value=">
您要的效果应该是下面这样的：
示例代码如下：
<html>
<head>
<meta >
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样式代码为：
{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 lisfhover ul { left: auto; }
#content { clear: left; }
</STYLE>
js代码为：
<SCRIPT type=text/javascript>function menuFix() {
var sfEls = documentgetElementById("fm")getElementsByTagName("li");
for (var i=0; i<sfElslength; i++) {
sfEls[i]onmouseover=function() {
thisclassName+=(thisclassNamelength>0 " ": "") + "sfhover";
}
sfEls[i]onMouseDown=function() {
thisclassName+=(thisclassNamelength>0 " ": "") + "sfhover";
}
sfEls[i]onMouseUp=function() {
thisclassName+=(thisclassNamelength>0 " ": "") + "sfhover";
}
sfEls[i]onmouseout=function() {
thisclassName=thisclassNamereplace(new RegExp("( |^)sfhover\\b"),
"");
}
}
}
windowonload=menuFix;
</SCRIPT>
最后的效果图为：
以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）