网页二,三级菜单制作

网页二级菜单制作的方式可以采用两种方式来实现，第一种使用纯CSS控制，第二种使用JavaScript+CSS。下面分别用两种方式来实现二级菜单。

不管采用哪种方式来实现，基本的html元素是不变的。基本的html元素如下：

   

       
• 首页

       
• 首页
             
  
                 
  • 二级菜单
  
                  
  • 二级菜单
  
             
  
         

       
• 首页
             
  
                 
  • 二级菜单
  
                  
  • 二级菜单
  
             
  
         

       
• 首页

       
• 首页

       
• 首页

   

一、CSS实现二级菜单

使用一下的样式就可以实现二级菜单的显示：

      *{ margin:0px;padding:0px;}
     #menu{ background-color :#eee; width:600px; margin:0 auto; height:40px; }
     ul{ list-style:none;}
     ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
     a{ text-decoration:none;color:#000;display:block ;width:90px;}
     a:hover{color:#fff; background-color:#666;}
     ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
     ul li ul{ display:none; position:absolute; width:90px;}
     ul li ul li a:hover{ background-color:#06f;}
     ul li:hover ul{ display:block;}

其中注意的地方有：

1、*号代表所以有的元素；

2、line-height属性，可以设置文字垂直居中。原理：因为line-height代表的字的行高，如果父元素的高度为50px且padding值为0，字体设置为20px,line-height设置为30px,那么该文字在父容器中是居中，上面下面都有15px的留白,所以只要设置行高和父容器的行高一样那么文字就是垂直居中。当父容器太大的时候只需要包含文字的容器在中间显示，可以对包含文字的容器进行设置margin-top属性或者对父容器设置padding-top属性。

3、hover选择器与：之间不能有空格，养成良好的习惯，如果有空格，可能不会显示正确样式效果。

4、相对定位与绝对定位：

    one
       

        two
           

                three
           

       

   

css的控制代码如下：

    div{  margin-left:0px;}
    #one{ height:500px; border:1px solid red; width:500px; position:relative}
    #two{ height:300px; border:1px solid blue; width:300px; margin :0px; position :relative }
     #three{ height:100px; border:1px solid black ; width:100px;position :absolute;top:50px left:20px }

其中#three设置的是绝对定位，那么当他的上级容器没有设置为相对定位的时候，那么#three就是相对浏览器的左上角定位，否则#three就相对于上级容器定位。在该实例中，#three是相对于#two进行绝对定位的，如果#two没有进行相对定位，那么#three就是相对于#one进行绝对定位。如果#three的上级元素都有相对定位的话，那么就相对于距离其最近的上级元素进行绝对定位。在我的感觉中相对定位是配合绝对定位使用，其中绝对定位的元素不属于文档流中的一部分。

在进行绝对定位的时候用top、left、right、bottom来指定相对上级元素的位置，但是如果不设置top、left、right、bottom元素，而是设置margin又会是不一样的效果。将#three的中的top和left属性去掉，加上margin-top和margin-left会使得#three相对自己本身的位置进行左上偏离，至于本来的位置在哪里，可以根据在可视化工具中去查看。

二、JavaScript+CSS实现二级菜单

使用下列的样式和JavaScript脚本：

 
   

其中注意的地方有：

1、document.getElementsByTagName("tagname")函数返回的是在document文档中返回tagname标签数组。当然每个对象都可以使用getElementsByTagName的方法，不同的对象使用该方法只能从该对象的下级元素中去搜索tagname标签。

二、CSS三级菜单的实现

三级菜单的实现和二级菜单是一样的原理，其核心是利用三级菜单相对于二级的绝对定位。其中定位属性有继承的效果。

---

一切情绪皆痛苦，没有什么情绪是快乐的。