<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> new document </title>
</head>
<style>
ul,li{margin:0;padding:0;list-style:none}
#nav li a{
font-size:16px;
display:block;
text-decoration:none;
color:#000;
/*zoom:1;*/
}
#nav li a:hover{
background:#f00;
color:#fff;
}
#nav li{
line-height:25px;
width:150px;
white-space:normal;
background:#ccc;
position:relative;
float:left;
font-size:0;
}
#nav li li{
float:none;
}
#nav li ul{
position:absolute;
width:150px;
left:0;
top:25px;
display:none;
}
#nav ul ul{
left:150px;
top:0;
display:none;
}
</style>
<script type="text/javascript">
window.onload = function(e){
var li = document.getElementById("nav").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover = function(){
if(this.getElementsByTagName("ul").length > 0) {
this.getElementsByTagName("ul")[0].style.display="block";
}
}
li[i].onmouseout = function(){
if(this.getElementsByTagName("ul").length > 0)
this.getElementsByTagName("ul")[0].style.display="none";
}
}
}
</script>
<body>
<ul id="nav">
<li><a href="#">我的电脑</a>
<ul>
<li><a href="#">C盘</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Document And Setting</a></li>
<li><a href="#">System</a></li>
</ul>
</li>
<li><a href="#">D盘</a>
<ul>
<li><a href="#">系统资料</a></li>
<li><a href="#">Ghost</a></li>
<li><a href="#">软件</a></li>
</ul>
</li>
<li><a href="#">E盘</a>
<ul>
<li><a href="#">游戏</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">歌曲</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">我的文档</a>
<ul>
<li><a href="#">参考手册</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">经典书籍</a></li>
</ul>
</li>
<li><a href="#">我的图片</a>
<ul>
<li><a href="#">网页素材</a></li>
<li><a href="#">桌面主题</a></li>
<li><a href="#">美女写真</a></li>
</ul>
</li>
<li><a href="#">我的视频</a>
<ul>
<li><a href="#">客户资料</a></li>
<li><a href="#">连续剧</a></li>
<li><a href="#">电影</a></li>
</ul>
</li>
</ul>
</body>
</html>
