<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>左侧横向下拉菜单</title>
<style type="text/css">
body{background:#FFF;}
*{margin:0;padding:0;font-size:12px;}
ul{list-style:none;}
.left{margin-top:20px;margin-left:50px;}
#left_menu{border-bottom:1px #CCC solid;width:150px;}
#left_menu li{position:relative;}
#left_menu li a{border-top:1px #CCC solid;border-left:1px #CCC solid;border-right:1px #CCC solid;display:block;width:140px;padding:5px;color:#000;text-decoration:none;}
#left_menu li ul{position:absolute;left:150px;border-bottom:1px #ccc solid;top:0px;display:none;width:150px;}
#left_menu li ul li ul{left:150px;}
#left_menu li a:hover{background-color:gray;color:#FFF;}
#left_menu a.hover{background:url(images/arrow-list.gif) no-repeat 135px 5px;}
</style>
<script type="text/javascript">
var menuList = ["left_menu"];
function menuItems(){
var info = document.getElementById("info");
for(var i=0;i<menuList.length;i++){
var ulTags = document.getElementById(menuList[i]).getElementsByTagName("ul");
for(var t=0;t<ulTags.length;t++){
ulTags[t].parentNode.getElementsByTagName("a")[0].className ="hover";
ulTags[t].parentNode.onmouseover =function(){
// alert("hover");
// console.log("over");
// info.innerHTML += "over";
this.getElementsByTagName("ul")[0].style.display ="block";
}
ulTags[t].parentNode.onmouseout =function(){
// alert("out");
// console.log("out");
// info.innerHTML += "out";
this.getElementsByTagName("ul")[0].style.display ="none";
}
}
}
}
if(window.addEventListener){
window.addEventListener("load",menuItems,false)
}elseif(window.attachEvent){
window.attachEvent("onload",menuItems);
}
</script>
</head>
<body>
<div class="left">
<ul id="left_menu">
<li><a href="#">菜单一</a></li>
<li>
<a href="#" class="hover">菜单二</a>
<ul>
<li><a href="#">菜单二(一)</a></li>
<li><a href="#">菜单二(二)</a></li>
<li><a href="#">菜单3(二)</a></li>
<li><a href="#">菜单4(二)</a></li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
<li>
<a href="#">菜单四</a>
<ul>
<li><a href="#">菜单四(一)</a></li>
<li>
<a href="#">菜单四(二)</a>
<ul>
<li><a href="#">菜单四(二)1</a></li>
<li><a href="#">菜单四(二)2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单五</a></li>
</ul>
</div>
<div id="info">11</div>
</body>
</html>
左侧横向下拉菜单
#left_menu li a 这个样式加个background:#FFF;在IE7中事件才会执行。具体原因不清楚。