• 一級菜單

在ul列表內建立li元素并清除默認樣式

讓所有li元素左浮動并清除浮動

DOM中文檔結構如下：
<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; }

效果圖如下：

總結

以上是生活随笔為你收集整理的二级下拉菜单布局（纵向、横向）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。