グローバルナビをHTMLとCSSのみで追加しました。

先日、ブログのヘッダーにカテゴリー用のグローバルナビを追加しました。
ずっとテンプレのデザインだったので、追加したいなぁーと。
ボンヤリ思っていたのに、重い腰が動かず。

と言っても、コード的にはほんの数行です。

HTML
 <ul id="gnav">
    <li><a href="http://">音楽</a></li>　             <!--任意のURLと文言-->
   <li><a href="http://">デザイン</a></li>      　    <!--任意のURLと文言-->
   <li><a href="http://">オピニオン</a></li>        <!--任意のURLと文言-->
   <li><a href="http://">ライフハック</a></li>　    <!--任意のURLと文言-->
   <li><a href="http://">Twitter</a></li>　               <!--任意のURLと文言-->
   <li><a href="http://">note</a></li>             　     <!--任意のURLと文言-->
</ul>

CSS
 #gnav{
    width:800px; 　/*任意の幅で*/
    height: 30px;    /*任意の高さで*/
    margin:0 auto;  /*センタリング用*/
    list-style:none;
}

#gnav a{
    display:block;
    line-height:30px;   /*任意の高さで(基本heightと同じ数値)*/
    vertical-align: baseline;
}

#gnav a:hover{text-decoration:none;}

#gnav li{
   width: 133px;  /*任意の幅*/
   float: left;
   background-color: #4d4d4d;  /*任意の色*/
   text-align: center;
   color: #fff;  /*任意の色*/
}

#gnav li:hover{background-color:#47a89c;}   /*任意の色*/