本人菜鸟，写这个一方面是为了自己以后也能复习，另一方面也许能帮助一些需要的朋友……大神请忽视我！

昨天闲着无聊，想着用css+html做一个横向的导航栏。。。。。其实之前也尝试过，可是总是失败或者说二级导航栏不能按自己想要的位置摆放，现在终于有点明白了——就是position这个家伙捣的鬼！

要想二级菜单放在一级菜单下面，有几点需要注意：

　①：一级菜单的li中要设置position:relative;这相当于给二级菜单设置一个定位参考物；

　②：二级菜单中的ul要设置position:absolute;（这样设置之后，left,top之类的属性才起中作用），然后根据设置left(距离一级菜单的左边框距离)，top(距离一级菜单的上边框)就可以搞定了！

下面直接看一下代码吧；

html:

1 
     
       2     
      
        3         
       
导航1 4             
        
          5                 
         
分导航1 6                     
          
            7 
           
又导航1
 8 
           
又导航1
 9 
           
又导航1
10 
          
11                 
12                 
         
分导航213                     
          
           14 
           
又导航1
15 
           
又导航1
16 
           
又导航1
17 
          
18                 
19                 
         
分导航3
20                 
         
分导航4
21             
        
22         
23         
       
导航224             
        
         25                 
         
分导航1
26                 
         
分导航2
27                 
         
分导航3
28                 
         
分导航4
29             
        
30         
31         
       
导航332             
        
         33                 
         
分导航1
34                 
         
分导航2
35                 
         
分导航3
36                 
         
分导航4
37             
        
38         
39         
       
导航440             
        
         41                 
         
分导航1
42                 
         
分导航2
43                 
         
分导航3
44                 
         
分导航4
45             
        
46         
47         
       
导航548             
        
         49                 
         
分导航1
50                 
         
分导航2
51                 
         
分导航3
52                 
         
分导航4
53             
        
54         
55     
      
56 
     

CSS代码：

1 

效果图：

大概就是这样子了，不要在意颜色~~