<select onmouseover="size=10" onmouseout="size=1" onchange="size=1">
<option value="126.htm">126</option>
<option value="163.htm">163</option>
<option value="16.NET.htm">163net</option>
<option value="163vip.htm">163vip</option>
就是让鼠标悬停后，显示的数目就自动改成10或其它数目。鼠标移开后，还原成只显示一个。用户点击了某一项也让它恢复成正常状态。
使用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>
把要展开的元素做成绝对定位的（position:absolute），它就脱离了文档流，不会影响到后面的其他元素。当然，用了绝对定位后，你的代码也要做相应的修改才行，这就你自己去摸索了。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）