Html + Css + Javascript 自定制一个简单的双层横向Navigation

<div id="nav-div">
<div id="list-nav-div-first">
<div id="Tab1" class="nav-div-first" onmouseover="NavFirstDivOnMouseOver(this)"  onmouseout="HideAllSecondLevelDiv()" onclick="NavigationTabClick(this)" >
<span>Tab1</span>
<div id="Tab1_1" class="nav-second-div-1">
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab11</a></span>
<span class="nav-second-span">|</span>
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab12</a></span>
</div>
</div>
<div id="Tab2" class="nav-div-first" onmouseover="NavFirstDivOnMouseOver(this)" onmouseout="HideAllSecondLevelDiv()" onclick="NavigationTabClick(this)" >
<span>Tab2</span>
<div id="Tab2_1" class="nav-second-div-2">
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab2</a></span>
<span class="nav-second-span">|</span>
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab2</a></span>
<span class="nav-second-span">|</span>
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab2</a></span>
<span class="nav-second-span">|</span>
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab2</a></span>
</div>
</div>

<div id="Tab3" class="nav-div-first" onmouseover="NavFirstDivOnMouseOver(this)"  onmouseout="HideAllSecondLevelDiv()" onclick="NavigationTabClick(this)" >
<span>Tab3</span>
<div id="Tab3_1" class="nav-second-div-3">
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab3</a></span>
<span class="nav-second-span">|</span>
<span class="nav-second-span"><a href="http://www.cnblogs.com/">Tab3</a></span>
</div>
</div>
</div>
</div>

<script type="text/javascript">
function NavFirstDivOnMouseOver(obj) {
var currentAllSpan = $("#" + obj.id + " div span");
if (currentAllSpan.length > 0) {
switch (obj.id) {
case "Tab1":
$("#Tab1_1").show();
break;
case "Tab1":
$("#Tab2_1").show();
break;
case "Tab1":
$("#Tab3_1").show();
break;
}
}
}

function HideAllSecondLevelDiv() {
var secondLevelDiv = $("nav-div-first div");
for (var i = 0; i < secondLevelDiv.length; i++) {
$("#" + secondLevelDiv[i].id.toString()).hide();
}
}

function NavigationTabClick(obj) {
switch (obj.id) {
case "Tab1":
window.location.href = http://www.cnblogs.com/;
break;
case "Tab2":
window.location.href = http://www.cnblogs.com;
break;
case "Tab3":
window.location.href = http://www.cnblogs.com/;
break;
}
}
</script>

div#list-nav-div-first div:hover {
background:#EFEFEE;
color:#396C04;
}

.nav-div-first {
text-decoration:none;
text-shadow:1px 1px 1px white;
padding-top:15px;
width:200px;
height:27px;
background:#CACACA;
float:left;
text-align:center;
border-left:1px solid #e4e4e4;
border-right:1px solid  #a4a4a4;
border-bottom:1px solid #e5e5e5;
font-family:Helvetica,Arial;
font-size:16px;
font-weight:bold;
}

.nav-second-div-1 {
width:995px;
height:40px;
position:relative;
display:none;
margin-top:9px;
margin-bottom:10px;
margin-left:-1px;
margin-right:20px;
border-bottom:1px solid #cccccc;
background-color:#EFEFEE;
font-family:Helvetica,Arial;
font-size:13px;
font-weight:normal
}

.nav-second-div-2 {
width:995px;
height:40px;
position:relative;
display:none;
margin-top:9px;
margin-bottom:10px;
margin-left:-203px;
margin-right:20px;
border-bottom:1px solid #cccccc;
background-color:#EFEFEE;
font-family:Helvetica,Arial;
font-size:13px;
font-weight:normal
}

.nav-second-div-3 {
width:995px;
height:40px;
position:relative;
display:none;
margin-top:9px;
margin-bottom:10px;
margin-left:-405px;
margin-right:20px;
border-bottom:1px solid #cccccc;
background-color:#EFEFEE;
font-family:Helvetica,Arial;
font-size:13px;
font-weight:normal
}

.nav-second-span {
text-decoration:none;
margin-left:20px;
margin-right:14px;
margin-top:10px;
margin-bottom:10px;
float:left;
text-align:left;
}

.nav-second-span a:link {
color: #065F8C;
text-decoration:none;
}

.nav-second-span a:visited {
color: #800080;
text-decoration:none;
}

.nav-second-span a:active {
background-color: #E74600;
text-decoration:none;
}

.nav-second-span a:hover {
color:#396C04;
text-decoration:none;
}