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>