今天刚学会一个js效果：鼠标滑过出现下拉菜单的js做法。
大致思路如下：先给菜单box定好宽高加上position:relative;再给里面的内容定上与之相同的宽高;然后给里面的下拉 二级菜单加上宽度绝对定位。
eg:
<style>
.li{ width:150px; height:40px; position:relative; display:inline;z-index:1000;}
.li menuA{width:150px; height:40px;}
.li menuA:hover{background:yellow;}
.li ul{ width:150px;position:absolute; z-index:1000;}
</style>
<script>
function down(){
document.getElementById("pull_1").style.display = "none";
document.getElementById("pull_2").style.display = "none";
document.getElementById("pull_3").style.display = "none";
}
function pull(appearList){
down();/*此处若以前较笨的做法是：
if( appearList =="pull_1"){
document.getElemetById("pull_1").style.display ="block";
document.getElemetById("pull_2").style.display ="none";
document.getElemetById("pull_3").style.display ="none";
}else if( appearList =="pull_2"){
document.getElemetById("pull_1").style.display ="none";
document.getElemetById("pull_2").style.display ="block";
document.getElemetById("pull_3").style.display ="none";
}else fi(){……………………end so on……}
*/
document.getElementById(appearList).style.display = "block";
}
window.onload = function(){
down();
}//此处是为了让浏览器先加载完所有文件再运行脚本
</script>
/*html*/
<ul>
<li class="li" onmouseover="pull('pull_1')" onmouseout="down()">
<a class="menuA"></a>
<ul id="pull_1">
<li><a></a><li>
<li><a></a><li>
</ul>
</li>
</ul>