<navi class="gnavi">
<ul>
    <li><a href="http://htmllifehack.hatenablog.com/">トップ</a></li>
    <li><a href="http://htmllifehack.hatenablog.com/archive/category/%E3%82%B2%E3%83%BC%E3%83%A0">ゲーム</a></li>
    <li><a href="http://htmllifehack.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E8%A3%85%E9%A3%BE%E7%B3%BB">ブログ装飾</a></li>
    <li><a href="http://htmllifehack.hatenablog.com/archive/category/web%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E7%B3%BB">Web制作</a></li>
    <li><a href="http://htmllifehack.hatenablog.com/archive/category/googolefont">フォント</a></li>
</ul>
</navi>

.gnavi ul li{
    width:170px;
    height:30px;
    margin:5px;
    list-style:none;
    text-align:center;
    float:left;
    background-color:#5bc8ac;
    line-height:30px;
    }
.gnavi li a{
    text-decoration:none;
    display:block;
    color:#ffffff;
    }
.gnavi a:hover{
    background-color:#f18d9e;
    color:#ffffff;
}