(续)精彩导航

对上述的导航菜单都简单浏览了一遍,挑选了几个比较喜欢用自己的方式实现了下!  
发现其实挺简单的,无非就是想法和设计不错,不过往往我们国内设计师缺的就是这些...

css 代码

/* menu Theme */
@import url(basestyle.css);
@import url(baseframe.css);

/*Start primaryNav1 */
#header-nav1{ width:760px; height:120px;background:#fff url("../images/menu/nav1-header.jpg") repeat-x left bottombottom;}
#nav1{width: 530px;height:31px;padding:80px 0 9px 30px;font-family:Verdana;}
#nav1 ol {float: left;}
#nav1 ol li {
    float: left;
    margin-left:6px;
    width:91px;
    height:21px;
}

#nav1 ol li a {
    display: block;
    width:80px;
    height:31px;
    font-size:12px;
    line-height:31px;
    text-decoration: none;
    font-weight: bold;
    text-align:center;
    color:#fff;
    background:url("../images/menu/nav1-m.gif") no-repeat left top;
}

#nav1 ol li a:hover{
    color:#000;
    background:url("../images/menu/nav1-m.gif") no-repeat left -40px ;
}

#nav1 ol li.active a{
    color:#000;
    background:url("../images/menu/nav1-m.gif") no-repeat left -80px;
}

/*End primaryNav1 */
/*******************************************************/
/*Start primaryNav2 */
#header-nav2{ height:77px;background:#000 url("../images/menu/nav2-bar-bg.gif") repeat-x left bottombottom;}
#nav2{width: 530px;height:21px;padding:56px 0 0px 30px;font-family:Verdana;}
#nav2 ol {float: left;}
#nav2 ol li {
    float: left;
    margin-left:6px;
    width:91px;
    height:21px;
}

#nav2 ol li a {
    display: block;
    width:91px;
    height:21px;
    font-size:12px;
    line-height:21px;
    text-decoration: none;
    font-weight: bold;
    text-align:center;
    color:#fff;
    background:url("../images/menu/nav2-m.gif") no-repeat left top;
}

#nav2 ol li a:hover{
    color:#000;
    background:url("../images/menu/nav2-m.gif") no-repeat left -25px ;
}

#nav2 ol li.active a{
    color:#000;
    background:url("../images/menu/nav2-m.gif") no-repeat left -25px;
}

/*End primaryNav2 */
/*******************************************************/
/*Start primaryNav3 */
#header-nav3{ height:96px;background:#000 url("../images/menu/nav3-bar-bg.gif") repeat-x left bottombottom;}
#nav3{width: 530px;height:26px;padding:70px 0 0px 30px;font-family:Verdana;}
#nav3 ol {float: left;}
#nav3 ol li {
    float: left;
    margin-left:6px;
    width:82px;
    height:26px;
}

#nav3 ol li a {
    display: block;
    width:82px;
    height:26px;
    font-size:12px;
    line-height:26px;
    text-decoration: none;
    font-weight: bold;
    text-align:center;
    color:#fff;
    background:url("../images/menu/nav3-m.gif") no-repeat left top;
}

#nav3 ol li a:hover{
    color:#000;
    background:url("../images/menu/nav3-m.gif") no-repeat left -26px ;
}

#nav3 ol li.active a{
    color:#000;
    background:url("../images/menu/nav3-m.gif") no-repeat left -26px;
}

/*End primaryNav3 */

/*******************************************************/
/*Start primaryNav4 */
#header-nav4{width:710px; padding-top:58px;background:url("../images/menu/nav4-header.jpg") no-repeat left top;}
#nav4{
    background:transparent url("../images/menu/nav4-bar.gif") repeat scroll 710px 100%;
    display:block;
    line-height:1em;
    margin:0pt auto 5px;
    padding:0pt;
    text-align:center;
    width:710px;
    height:39px;
}
#nav4 ol {
    padding-left:20px;
}
#nav4 ol li {
    float:left;
    padding:0pt 1px 10px;
    margin-left:6px;

}

#nav4 ol li a {
    display: block;
    padding:10px 9px 8px 33px;
    font-size:12px;
    font-weight: bold;
    text-align:center;
    background-image:url("../images/menu/Nav4-icons.gif");
    background-repeat:no-repeat;
    color:#525252;



}

#nav4 ol li a:hover{
    color:#000;
    background:url("../images/menu/Nav4-icons.gif") no-repeat left -26px ;
}

#nav4 ol li.active{
    background:transparent url("../images/menu/nav4-bar.gif") repeat scroll 50% 100%;
    padding-bottom:9px;
}
*html #nav4 ol li.active{padding-bottom:10px;} /* for IE */
#nav4 #nav4-m1 a {
    background-position:11px 60%;
}
#nav4 #nav4-m2 a {
    background-position:-590px 60%;
}
#nav4 #nav4-m3 a {
    background-position:-2091px 60%;
}
#nav4 #nav4-m4 a {
    background-position:-2390px 60%;
}
#nav4 #nav4-m5 a {
    background-position:-2990px 60%;
}
/*End primaryNav4 */
/*******************************************************/
/*Start primaryNav5 */
#header-nav5{ height:100px;background:url(../images/menu/nav5-bar-bg.jpg) repeat-x left top;}
#nav5{width: 530px;margin: 0;padding: 66px 0 10px 30px;font-family:  Verdana;}
#nav5 ol {float: left;height:24px;}
#nav5 ol li {list-style: none;
    float: left;
    margin-left:6px;
    width:80px;
    height:24px;
}

#nav5 ol li a {
    display: block;
    width:80px;
    height:24px;
    font-size:12px;
    line-height:21px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    background:url(../images/menu/nav5-m-rightright.gif) no-repeat rightright top ;
}
#nav5 li a span{
    display:block;
    width:80px;
    height:24px;
    text-align:center;
    background:url(../images/menu/nav5-m-left.gif) no-repeat left top;
}
#nav5 li a:hover{
    background: url(../images/menu/nav5-m-rightright-hover.gif) no-repeat rightright top ;
}
#nav5 li a:hover span{

    background:url(../images/menu/nav5-m-left-hover.gif) no-repeat left top;
}

#nav5 ol li.active a{
    background:url(../images/menu/nav5-m-rightright-active.gif) no-repeat rightright top;
}
#nav5 ol li.active a span{
    background:url(../images/menu/nav5-m-left-active.gif) no-repeat left top;
    }
/*End primaryNav5 */
/*******************************************************/
/*Start primaryNav6 */
#header-nav6{ height:77px;background:url(../images/menu/nav6-header-bg.gif) repeat-x left bottombottom;}
#nav6{width: 530px;margin: 0;padding: 36px 0 10px 30px;font-family:  Verdana;}
#nav6 ol {float: left;height:31px;}
#nav6 ol li {list-style: none;
    float: left;
    margin-left:6px;
    width:80px;
    height:31px;
}

#nav6 ol li a {
    display: block;
    width:80px;
    height:31px;
    font-size:12px;
    line-height:31px;
    text-decoration: none;
    font-weight: bold;
    color: #6CA300;
}
#nav6 li a span{
    display:block;
    width:80px;
    height:31px;
    text-align:center;
}
#nav6 li a:hover{
    background: url(../images/menu/nav6-m-top.gif) no-repeat top left;
}
#nav6 li a:hover span{

    background: transparent url(../images/menu/nav6-m-bottombottom.gif) no-repeat bottombottom rightright;
}

#nav6 ol li.active{
    background: url(../images/menu/nav6-m-top.gif) no-repeat top left;
}
#nav6 ol li.active a{
    background: url(../images/menu/nav6-m-bottombottom.gif) no-repeat bottombottom rightright;
    }
/*End primaryNav6 */

xml 代码

<body  >
<div>
    <!--start nav1-->
    <div id="header-nav1">

        <div id="nav1">
            <ol >
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li ><a href="#">Program</a></li>
                <li ><a href="#">Blog</a></li>
                <li ><a href="#">Others</a></li>
            </ol>
        </div>
        <div class="clear"></div>
    </div>
    <!--end nav1-->

    <div class="space-portlet"></div>

    <!--start nav2-->
    <div id="header-nav2">

        <div id="nav2">
            <ol >
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li ><a href="#">Program</a></li>
                <li ><a href="#">Blog</a></li>
                <li ><a href="#">Others</a></li>
            </ol>
        </div>
        <div class="clear"></div>
    </div>
    <!--end nav2-->

    <div class="space-portlet"></div>

    <!--start nav3-->
    <div id="header-nav3">

        <div id="nav3">
            <ol >
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Project</a></li>
                <li ><a href="#">Program</a></li>
                <li ><a href="#">Blog</a></li>
                <li ><a href="#">Others</a>