利用CSS实现几款不错的菜单栏实例代码

2020-05-11 18:25:04易采站长站整理

<!--效果html开始-->
<div class="content">
<ul class="vertical-nav dark red">
<li class="active"><a href="http://www.internetke.com/"><i class="icon-home"></i>首页</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-cogs"></i>服务
<span class="submenu-icon"></span></a>
<ul>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
</ul>
</li>
<li><a href="http://www.internetke.com/"><i class="icon-briefcase"></i>产品
<span class="submenu-icon"></span></a>
<ul>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航<span class="submenu-icon"></span></a><ul>
<li><a href="http://www.internetke.com/">三级导航</a></li>
<li><a href="http://www.internetke.com/">三级导航</a></li>
<li><a href="http://www.internetke.com/">三级导航 <span class="submenu-icon"></span>
</a>
<ul>
<li><a href="http://www.internetke.com/">四级导航</a></li>
<li><a href="http://www.internetke.com/">四级导航</a></li>
<li><a href="http://www.internetke.com/">四级导航</a></li>
<li><a href="http://www.internetke.com/">四级导航</a></li>
</ul>
</li>
<li><a href="http://www.internetke.com/">三级导航</a></li>
</ul>
</li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
<li><a href="http://www.internetke.com/">二级导航</a></li>
</ul>
</li>
<li><a href="http://www.internetke.com/"><i class="icon-user"></i>关于我们</a></li>