Web標准：四、縱向導航菜單及二級彈出菜單
知識點：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu{
border:solid 1px #CCC;
width: 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;
width: 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>