一、首先写好基本的HTML结构代码

下面的代码就是基本的网站导航菜单的HTML结构，为了演示方便，我们只写出两组栏目的导航菜单，当我们做好下拉菜单的功能后，显示的效果是：网页上只显示一级菜单项，当鼠标经过时，才显示相应的子菜单。所以我们用ul和li定义出外层结构，然后在每个li项目中，使用dl定义每个菜单项，平常状态下显示的一级菜单文字用dt包含起来，其对应该显示的子菜单定义为dd，代码如下：

•       
• 
          

  
  

              

  HTML教程

  
  

                

  HTML初级知识

  
  

                

  HTML中级知识

  
  

                

  HTML高级知识

  
  

            

      
        



•        
• 
          

  
  

              

  CSS教程

             
                

  CSS初级教程

  
  

                

  CSS中级教程

  
  

                

  CSS高级教程

  
  

            

      
         



•   

1、首先对整个导航菜单项进行设置，为ul加一个id，代码如下：

2、对ul写入普通的CSS样式设置，将外边距（margin）、内边距（padding）设为零，并设置整个菜单的长度为450px，这是因为每单个菜单项要设为200px，再加上两边的一些间隔，所有真个的菜单宽度要设置宽一些，另外清除每个ul前面的小圆点：list-style-type:none;，并设置字体大小为16px，字体为Arial。
#menu {  
   margin:0;   
   padding:0;  
   width:450px;  
   list-style-type:none;   
   font:16px Arial;   
}

3、下面就针对每个li进行设置CSS样式了，首先设置每个li向左飘动，以实现每单个菜单横向排列，同时设置宽度width、margin和padding，先将每单个菜单的右外边距设置为2px，使得每单个菜单项之间隔开2px。然后，设置定位方式为相对定位，以便于它下级的dl以它为标准进行绝对定位。
#menu li {  
    float:left;   
    padding:0;   
    margin:0 2px 0 0;   
    width:200px;  
}

到这里为止，我们就可以再浏览器里看到如下图的效果了，可以发现基本已经实现了横向排列了，但是还不够完美。

三、继续对dl进行CSS设置

接下来，我们队dl进行CSS样式的设置，设置li的宽度也为200px，外边距（margin）都为0，下内边距为10px，另外设置其背景颜色为淡蓝色。
#FFFF00。
#menu li dl {  
    width:150px; 
    margin: 0;  
    padding: 0 0 10px 0;  
    background-color: #FFFF00;  
}

四、对各主菜单项dt进行设置

1、同样对其设置背景颜色，另外在主菜单项的下面设置一条红色的表框，便于与子菜单分开。背景颜色设置为#00FF00
#menu li dt {   
    margin:0;   
    padding: 5px;   
    text-align:center;  
    border-bottom:1px solid #FF0000;  
    background:#00FF00;  
}

2、再对主菜单项的文字进行设置，设置文字的呈现方式为block，设置文字颜色：#FF0000。并去除链接的下划线：
#menu li dt a ,#menu li dt a:visited {  
    display:block;   
    color:#FF0000;  
    text-decoration:none;  
}

到这一步，我们就看到下面的效果，此时下拉菜单的雏形已经完成。
 

来对下拉菜单进一步的优化设置。

一、对子菜单项dd进行设置
设置子菜单项的样式分为3步

1、首先对每个子菜单项，也就是dd元素进行常规设置，包括内外边距清零，设置文字颜色等。
/* 设置菜单项的dd */ 
#menu li dd {   
    margin:0;   
    padding:0;   
    color: #fff;  
}

2、为了使最后一个dd的下端有一条分割线，我们设置它为1px的红色下边框，这就使之与上边框的红色分割线想对应了，也告诉浏览者这是一块可以点击的区域。
#menu li dd.last {  
    border-bottom:1px solid #b00;  
}

上面的代码也新增了一个last的类，因此我们必须在对应的HTML代码中最后一个dd指定class="last"。

CSS高级教程

3、设置子菜单的链接的样式
#menu li dd a, #menu li dd a:visited {  
    display:block;   
    color:#FFF;   
    text-decoration:none;   
    padding:5px 20px;  
    background: #0000FF;
}
此时，我们在浏览器就可以看到下拉菜单的样式已经可以显示了。

二、设置鼠标经过时的响应
  最后一条规则，让鼠标滑过有下拉项的时候，显示下拉菜单。当然我们实际设置的是：如果某一个下拉菜单的父级元素（一级菜单项）被鼠标滑过，那么就让该下拉菜单可以被看见：
#menu li dd { visibility: visible;}
#menu li dd a:hover {  
    background: #0000FF;    
}
最后我们就可以运行整个文件实现效果了，建站教程网建议大家一起跟着步骤一步一步的做哦。