タブのようなナビゲーション

次のようなタブメニューを作成したいと思います。

li要素をfloat:leftすることでリスト項目が横方向に展開されます。a要素をブロックにすることで高さ をかせぎます。一番のポイントは、a要素の下側paddingでしょうか。選択状態のpaddingは、背景画 像の上に重なるようにしてそれ以外のタブはpaddingを調整することで背景が見えるようにしています。

headerに指定した画像は、次の画像です。

<div id="header">
    <ul>
        <li><a href="#">Home</a></li>
        <li id="current"><a href="#">CSS Tips</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">Link</a></li>
        <li id="doorend"><a href="#">Contact</a></li>
    </ul>
</div>

* {
    margin: 0;
    padding: 0;
}
#header {
    width:100%;
    background:#DAE0D2 url("bg.gif") repeat-x bottom;
}
#header ul {
    margin:0;
    padding:10px 10px 0;
    list-style:none;
}
#header li {
    float:left;
    margin:0;
    padding:0 0 0 9px;
    border-left: 1px solid;
    border-top: 1px solid;
    background-color:#c8dae1;
}
#header #doorend {
    border-right: 1px solid;
}
#header a {
    display:block;
    padding:5px 15px 4px 6px;
}
#header #current {
    background-color:#FEE9A8;
    
}
#header #current a {
    padding-bottom:5px;
}