- 一级菜单
- 在ul列表内建立li元素并清除默认样式
- 让所有li元素左浮动并清除浮动
<ul class="clearfix"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
CSS中的样式如下:
.ul1{ width:510px; margin:0 auto; } .ul1 li{ list-style:none; width:100px; line-height:45px; font-size:25px; text-align:center; border:1px #000 solid; float:left; background:#00F; } .ul1 a{ color:#FFF; text-decoration:none; }
效果图如下:
- 二级下拉菜单(纵向)
- 在一级ul列表内建立一级li元素并清除默认样式
- 让所有一级li元素左浮动并清除浮动
- 在一级li内创建二级ul列表,二级ul列表内建立二级li元素并清除默认样式
- 设置二级ul列表属性display:none;让此元素不会被显示
- 在JS内动态设置一级li元素被点击时,让其下的二级ul列表属性切换为display:block;让此元素显示
DOM中文档结构如下:
<ul class="ul1 clearfix"> <li><a href="#">一</a> <ul class="clearfix"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </li> <li><a href="#">二</a> <ul class="clearfix"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </li> <li><a href="#">三</a> <ul class="clearfix"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </li> <li><a href="#">四</a> <ul class="clearfix"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </li> <li><a href="#">五</a> <ul class="clearfix"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </li> </ul>
CSS中的样式如下:
ul,li,a{ margin:0; padding:0; } .ul1{ width:510px; margin:0 auto; } .ul1 li{ list-style:none; width:100px; line-height:45px; font-size:25px; text-align:center; border:1px #000 solid; float:left; background:#00F; } .ul1 a{ color:#FFF; text-decoration:none; } .ul1 ul{ display:none; } .ul1 ul li{ list-style:none; width:100px; line-height:30px; text-align:center; border:1px #000 solid; background:#0FF; }
清除浮动样式:
.clearfix:before,.clearfix:after{ display:table; content:""; } .clearfix:after{ clear:both;/*在所有元素的父元素上加伪类*/ } .clearfix{ *zoom:1; }
JS中的样式如下:
var oUl1 = document.getElementsByTagName("ul")[0]; var aLi1 = oUl1.children; var aUl2 = oUl1.getElementsByTagName("ul"); for(var i=0;i<aLi1.length;i++){ aLi1[i].onclick = function(){ this.getElementsByTagName("ul")[0].style.display = "block"; this.style.backgroundColor = "red"; } } for(var i=0;i<aUl2.length;i++){ var aLi2 = aUl2[i].getElementsByTagName("li"); for(var j=0;j<aLi2.length;j++){ aLi2[j].onmouseover = function(){ this.getElementsByTagName("a")[0].style.color = "red"; } aLi2[j].onmouseout = function(){ this.getElementsByTagName("a")[0].style.color = "white"; } } }
效果图如下:
- 二级下拉菜单(横向)
- 在纵向的设计步骤基础上给二级li元素添加左浮动并清除浮动。
在CSS的样式中添加:
.ul1 ul{ width:510px; } .ul1 ul li{ float:left; }
效果图如下: