CSS3的一个简单导航栏实现

上面是一个效果图，代码在下面：

html

1. <nav>  
2.    <ul class="nav-ul">  
3.       <li>  
4.             <a href="/">首页</a>  
5.       </li>  
6.       <li>  
7.             <a href="/category/frontend">Web前端</a>  
8.             <ul>  
9.                    <li class="nav-effect-1">  
10.                        <a href="/category/frontend/javascript">JavaScript</a>  
11.                   </li>  
12.                   <li class="nav-effect-2">  
13.                        <a href="/category/frontend/jq">JQuery</a>  
14.                   </li>    
15.                   <li class="nav-effect-3">  
16.                        <a href="/category/frontend/style">CSS</a>  
17.                   </li>    
18.                  <li class="nav-effect-4">  
19.                      <a href="/category/frontend/html">HTML</a>  
20.                  </li>    
21.             </ul>  
22.       </li>  
23.       <li>     
24.