css就能實現簡單導航欄實例

導語：導航欄，是網業中比較重要的.一個部分，不同的網頁有不不同的導航欄，各式各樣，你自己會寫導航欄嗎？下面的是本站小編為大家整理的用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>