今天剛學會一個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>