導語：導航欄，是網業中比較重要的.一個部分，不同的網頁有不不同的導航欄，各式各樣，你自己會寫導航欄嗎？下面的是本站小編為大家整理的用css就能實現簡單導航欄例項，供大家參考。
上面是一個效果圖，程式碼在下面：
html
XML/HTML Code複製內容到剪貼簿
<nav>
<ul class="nav-ul">
<li>
<a href="/">首頁</a>
</li>
<li>
<a href="/category/frontend">Web前端</a>
<ul>
<li class="nav-effect-1">
<a href="/category/frontend/javascript">JavaScript</a>
</li>
<li class="nav-effect-2">
<a href="/category/frontend/jq">JQuery</a>
</li>
<li class="nav-effect-3">
<a href="/category/frontend/style">CSS</a>
</li>
<li class="nav-effect-4">
<a href="/category/frontend/html">HTML</a>
</li>
</ul>
</li>
<li>
<a href="/category/end">後端</a>
<ul>
<li class="nav-effect-1">
<a href="/category/end/python-end">Python</a>
</li>
<li class="nav-effect-2">
<a href="category/end/PHP">PHP</a>
</li>
</ul>
</li>
<li>
<a href="/category/trivial">瑣碎雜類</a>
<ul>
<li class="nav-effect-1">
<a href="/category/trivial/linux">Linux</a>
</li>
<li class="nav-effect-2">
<a href="/category/trivial/ajax">Ajax</a>
</li>
</ul>
</li>
<li>
<a href="/category/life">我的生活</a>
<ul>
<li class="nav-effect-1">
<a href="/category/life/college">College</a>
</li>
<li class="nav-effect-2">
<a href="/category/life/review">Review</a>
</li>
<li class="nav-effect-3">
<a href="/category/life/sentiment">Sentiment</a>
</li>
</ul>
</li>
<li>
<a href="#">關於我</a>
<ul>
<li class="nav-effect-1">
<a href="/contribute">友情連結</a>
</li>
<li class="nav-effect-2">
<a href="/message">留言板</a>
