Web标准：四、纵向导航菜单及二级弹出菜单
知识点：
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu{
border:solid 1px #CCC;
100px;
}
#menu ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li{
background-color: #eee;
height: 26px;
padding: 0px 8px;
line-height: 26px;
border-bottom: solid 1px #CCC;
position: relative;
}
#menu ul li ul{
display: none;
position: absolute;
left: 100px;
top: 0px;
100px;
height: 26px;
background: #eee;
line-height: 26px;
border:1px solid #ccc;
}
/*下面的选择器的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block*/
#menu ul li:hover ul{
display: block;
}
#menu ul li.current ul{
display: block;
}
#menu a{
text-decoration: none; /*去掉a的样式，下划线*/
color: #000; /*a标签默认颜色是蓝色，给他一个黑色*/
}
#menu a:hover{
color: #F00;
}
body{
font-family: Verdana;
font-size: 12px;
line-height: 1.5; /*行高1.5倍*/
}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="#">网页版本布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li>固定宽度</li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li>新手入门</li>
<li>视频教程</li>
<li>常见问题</li>
</ul>
</li>
<li>div+css实例</li>
<li>常用代码</li>
<li>站长杂谈</li>
<li>技术文档</li>
<li>资源下载</li>
<li>图片素材</li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
//if (document.all&&document.getElementById) {
var lis=document.getElementById("menu").children[0].children;
for (i = 0; i < lis.length; i++) {
lis[i].onmouseover=function(){this.className="current"};
lis[i].onmouseout=function(){this.className=""}
};
//};
}
/*使用js去控制style的显示和隐藏
window.onload=function(){
if (document.all&&document.getElementById) {
var lis=document.getElementById("menu").children[0].children;
for (i = 0; i < lis.length; i++) {
lis[i].onmouseover=function(){
if(this.children[1]){
this.children[1].style.display='block';
}
};
lis[i].onmouseout=function(){
if(this.children[1]){
this.children[1].style.display='none';
}
}
};
}
*/
</script>
</body>
</html>