html+css实现水平手风琴菜单

最新推荐文章于 2025-06-07 15:48:25 发布

原创最新推荐文章于 2025-06-07 15:48:25 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

这是千锋教育的一个练习题，老师用float的方法做出来的，这里换一种思路，不用float试试能不能弄出来。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。

文章目录

最终效果

最终效果如下所示，鼠标悬停在某个导航菜单的时候在其右边弹出其下的子菜单，鼠标移开子菜单消失。
在这里插入图片描述

思路

和垂直手风琴菜单的思路差不多，都是利用display:none;隐藏元素的特性来实现子菜单的出现和消失。
不过这里还需要考虑将块级元素变为行内块级元素的操作。

html

和垂直的手风琴菜单使用的html一模一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<ul id="menu">
			<li><span>menu1</span>
			<ul>
				<li>submenu1</li>
				<li>submenu2</li>
				<li>submenu3</li>
				<li>submenu4</li>
			</ul>
			</li>
			<li><span>menu2</span>
			<ul>
				<li>submenu1</li>
				<li>submenu2</li>
				<li>submenu3</li>
				<li>submenu4</li>
			</ul>
			</li>
			<li><span>menu3</span>
			<ul>
				<li>submenu1</li>
				<li>submenu2</li>
				<li>submenu3</li>
				<li>submenu4</li>
			</ul>
			</li>
			<li><span>menu4</span>
			<ul>
				<li>submenu1</li>
				<li>submenu2</li>
				<li>submenu3</li>
				<li>submenu4</li>
			</ul>
			</li>
		</ul>
	</body>
</html>

css

*{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
#menu{
	margin: 10px 10px;
}
#menu>li{
	display: inline-block;
	background-color: aquamarine;
	margin: 0 -2px;
}
#menu>li span{
	display: inline-block;
	text-align: center;
	height: 100px;
	line-height: 100px;
	background-color: antiquewhite;
}
#menu>li ul{
	display: inline-block;
	height: 90px;
	vertical-align: middle;
	display: none;
}
#menu>li:hover ul{
	display: inline-block;
}

这里主要是注意li和ul本身的尺寸，即使在最头上指定了margin和padding为0的情况下也还是不能完全严丝合缝。所以出现了上面height: 90px;和margin: 0 -2px;的情况。感觉像这些东西还是得实际去试才会知道。