在绝大多数中,都会用到二级菜单实现的效果也各有不同,有的是用js实现的,也有用css实现的,我之前做了个比较简单的二级菜单,效果如下图所示:

首先由于元素比较少,我就把全部的外边距和内填充设置为了.

一级菜单浮动到左边使得水平排列,同时对一级菜单进行相对定位,二级菜单设置绝对定位,绝对定位是相对其父元素的.

下面看一下具体的代码:

HTML:

1 
     
       2     
      
        3         
       
我是一级菜单 4             
        
          5                 
         
我是二级菜单
 6                 
         
我是二级菜单
 7                 
         
我是二级菜单
 8             
        
 9         
10         
       
我是一级菜单
11         
       
我是一级菜单
12         
       
我是一级菜单
13         
       
我是一级菜单
14     
      
15 
     

 

下面是css的样式:

1 

这只是一种比较简单的二级菜单的实现方法,如果有可以优化的地方,欢迎评论.