二级下拉菜单布局（纵向、横向）

最新推荐文章于 2025-03-21 15:22:25 发布

7号样子

最新推荐文章于 2025-03-21 15:22:25 发布

阅读量2.6w

点赞数 14

本文链接：https://blog.youkuaiyun.com/Number7421/article/details/79995503

版权

本文介绍了如何使用HTML和CSS创建二级下拉菜单，包括纵向和横向布局。通过设置li元素的浮动、清除浮动以及使用display属性控制二级菜单的显示与隐藏，详细阐述了实现过程，并附带了相应的CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一级菜单

在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;
}

效果图如下：