css就能实现简单导航栏实例

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>