不规则导航简便css

设计图

 

html：

 

<DIV id=navigation>
    <UL id=menus>
        <LI class=current_page_item>
            <A class=home title=首页 href="#">
                首页
            </A>
            <LI class="page_item page-item-9">
                <A title=About href="#">
                    About
                </A>
                <LI class="page_item page-item-11">
                    <A title=Services href="#">
                        Services
                    </A>
                    <LI class="page_item page-item-13">
                        <A title="Join us" href="#">
                            Join us
                        </A>
                        <LI>
                            <A class=lastmenu href="javascript:void(0);">
                            </A>
                        </LI>
    </UL>
    <!-- searchbox START -->
    <DIV id=searchbox>
        <FORM action=http://www.sndaued.com/blog method=get>
            <DIV class=content>
                <INPUT class=textfield size=24 name=s>
                <SPAN class=switcher>
                    切换搜索引擎
                </SPAN>
            </DIV>
        </FORM>
    </DIV>
    <!-- searchbox END -->
    <DIV class=fixed>
    </DIV>
</DIV>

 

 

css：

 

 

#navigation {
    margin:1px auto;
    width:936px;
}
#menus li {
    display:inline;
    list-style:none;
}
#menus li a {
    background:transparent url(img/menu.gif) no-repeat;
    display:block;
    color:#382E1F;
    height:31px;
    line-height:31px;
    padding:0 20px;
    margin-left:-10px;
    text-decoration:none;
    font-size:11px;
    float:left;
    z-index:1;
}
#menus li a:hover {
    background-position:0 -31px;
}
#menus li.current_page_item a,
#menus li.current-cat a {
    background-position:0 -62px;
}
#menus li a.home {
    background-position:0 -93px;
    width:45px;
    padding:0;
    margin-left:0;
    text-indent:-999em;
}
#menus li a.home:hover {
    background-position:0 -124px;
}
#menus li.current_page_item a.home {
    background-position:0 -155px;
}
#menus li a.lastmenu:hover {
    background-position:0 0;
}
#searchbox {
    width:280px;
    float:right;
    padding:4px 10px;
}
#searchbox .textfield {
    line-height:16px;
    width:180px;
    float:right;
}
#searchbox .switcher {
    background:url(img/icons.gif) 0 0 no-repeat;
    float:right;
    width:18px;
    height:22px;
    line-height:16px;
    display:block;
    text-indent:-999em;
    padding:0 2px;
    height:16px;
    margin-top:3px;
}

 

 

 

 

 

用到了 负边距 和背景定位 这样就很容易了

 /Files/icss/不规则导航简便css.zip