利用CSS制作下拉菜单

利用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>上时，相应的子菜单显示出来

　　　　　　}

　　　　*/

 

完整代码示例：