使用CSS方法实现的效果（当鼠标悬停在科目上时，出现2级下拉菜单，2级菜单中包括“语文”，“数学”），此方法为纯CSS样式表功能实现，无任何js代码。
<html>
<head>
<style type="text/css">
*{ margin:0pxpadding: 0px}
#nav {
font-family:微软雅黑 <!-- -->
position: relative
width: 100%
height:30px
font-size:14px
color:gray
margin: 0 auto
background-color:#F1F1F1
}
#nav ul {
list-style-type: none
}
#nav ul li {
float: left
position: relative
padding: 4px
}
#nav ul li input{
font-family:微软雅黑
font-size:14px
color:gray
border: none
background-color: transparent
}
#nav ul li a {
text-align: center
display:block
text-decoration:none
color:gray
}
#nav ul li ul {
display: none
}
#nav ul li a:HOVER {
color: #FF4400
}
#nav ul li:hover ul {
display: block
position: absolute
padding-top: 5px
margin-left: -9px
}
#nav ul li:hover ul li{padding: 0px}
#nav ul li:hover ul li a {
display:block
background-color:#F1F1F1
color:gray
width: 80px
height:30px
line-height:30px
text-align: center
border-bottom: 1px solid #f2f2f2
border:1px solid #f2f2f2
}
#nav ul li ul li a:hover {
background-color: white
color:#FF4400
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a >   ★科 目  </a>
<ul>
<li><a href="">语文</a>
</li>
<li><a href="">数学</a>
</li>
</ul></li>
</li>
<li id="alast"><a> 个人设置  </a>
<ul>
<li><a href=""> 帮助中心</a>
</li>
<li><a href=""> *** 作设置</a>
</li>
<li><a href="" >音频</a>
</li>
</ul></li>
</ul>
</div>
</body>
</html>
我刚才写了一个简单的代码，你按照这种思路应该就可以了至于外观上面的你可以加点背景图片，变成跟真的下拉框一样的
主要利用css和js编写：
<html><head>
<script type="text/javascript">
function get() {
document.getElementById("id").style.display= 'block'
}
</script></head>
<body><br />第一种：<br />
<div class="hosp"><input type="text" value="请选择" style="width:180px"/><input type="button" onmouseup="get()" value=">" />
</div>
<div id="id" style="display:nonewidth:240px">
<table border="1">
<tr><td width="200"><a href="#">aaa</a></td></tr>
<tr><td width="200"><a href="#">bbb</a></td></tr>
<tr><td width="200"><a href="#">ccc</a></td></tr>
</table>
</div>
</body>
</html>
不懂的请Hi我
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）