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

html

<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>

css

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;
  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 {
    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 {
    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 {
    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;
}