利用CSS制作下拉菜单
1.定义一个div，给div一个id或class,给div一个样式.
eg:<div id="menu"></div>
/*css
#menu{
width:1024px; //给div定义一个宽度
height:40px; //给div定义一个高度
margin:0 auto; //让div居中显示
background-color:#eee; //给div一个背景颜色
}
*/
2.制作下拉菜单所需的无序列表（ul）.
eg:<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a></li>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<li><a href="#">学习中心</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
3.给无序列表加上样式
/*css
ul{list-style:none;} //去掉无序列表的默认圆点
ul li{
float:left; //让无序列表水平显示
line-height:40px; //让无序列表在垂直方向上居中
text-align:center; //让无序列表在水平方向上居中
position:relative; //父级元素相对定位的目地是为了让子菜单居于上一级菜单的正下方
}
a{
text-decoration:none; //去除<a>的下划线
color:#000; //给<a>的颜色
display:block; //让<a>以块级元素显示
width:90px; //给<a>一个宽度
}
a:hover{
background-color:#666;color:#fff;
} //给鼠标滑过一个动作
ul li ul li{
float:none; //让子菜单以垂直方向显示
background:#eee;
margin-top:2px; //让子菜单之间有2px的间距
}
ul li ul{
width:90px;
position:absolute; //让子菜单居于上一级菜单的正下方
display:none; //正常状态下子菜单处于隐藏状态
}
ul li:hover ul{
display:block; //当鼠标滑动到父级菜单的<li>上时，相应的子菜单显示出来
}
*/
完整代码示例：
