纯CSS滑动显示多级菜单

最新推荐文章于 2024-06-18 16:20:24 发布

tyt叮当tyt

最新推荐文章于 2024-06-18 16:20:24 发布

阅读量827

点赞数

分类专栏： Java Web 文章标签： css menu

Java Web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#menu a {
	display: block;	/*指定背景色占整块，不然背景色只在字体下有*/
	text-decoration: none;	/*取消下划线*/
	background-color: #569E3D;	/*菜单背景色*/
	line-height: 25px;	/*调整行高*/
	text-align: center;
}
#menu ul {
	list-style: none;	/*取消前缀符号*/
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

#menu ul li {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}
/*上面的是样式可有可无*/

#menu ul li {
	float: left;	/*取消首行菜单换行*/
	position: relative;
	width: 150px;
}

#menu ul {
	padding-left: 0px;
}
#menu ul ul {
	display: none;	/*第二级菜单默认隐藏*/
	position: absolute;
}
#menu ul :hover ul :hover ul {
	display: block;
	left: 150px;
	top: -1px;	/*菜单左右保持对齐，如果不加则往下移一格*/
}

#menu ul :hover ul, #menu ul :hover ul :hover ul :hover ul, #menu ul :hover ul :hover ul :hover ul :hover ul {
	display: block;	/*:hover是关键，且:hover前的空格使用也很关键，个人觉得加空格就是前面的元素一起保持:hover*/
}


#menu ul :hover ul ul, #menu ul :hover ul :hover ul ul, #menu ul :hover ul :hover ul :hover ul ul {
	display: none;	/*:hover只显示下一级菜单，下一级以下的菜单隐藏*/
}
</style>
</head>
<body>
<div id="menu">
<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">关于我们</a>
	<ul>
		<li><a href="#">简介</a></li>
		<li><a href="#">总裁</a></li>
		<li><a href="#">发展</a></li>
		<li><a href="#">荣誉</a></li>
	</ul>
	</li>
	<li><a href="#">产品服务</a>
	<ul>
		<li><a href="#">产品1</a>
		<ul>
			<li><a href="#">配套</a></li>
			<li><a href="#">配件</a></li>
		</ul>
		</li>
		<li><a href="#">产品2</a>
		<ul>
			<li><a href="#">产品2-1</a></li>
			<li><a href="#">产品2-2</a></li>
		</ul>
		</li>
		<li><a href="#">服务</a>
		<ul>
			<li><a href="#">服务111</a></li>
			<li><a href="#">服务112</a></li>
			<li><a href="#">服务113</a></li>
			<li><a href="#">服务114</a></li>
			<li><a href="#">服务115</a></li>
		</ul>
		</li>
	</ul>
	</li>
</ul>
</div>
</body>
</html>

关键是:hover的使用，这里的:hover前要加空格，空格不能删除，不好的地方是:hover前加空格，强大的是可以加很多级菜单，只需按照后面两行配置就可以，其它不用改。CSS的代码已经简到不能再简了，我也想要更简单的。ul li和ul ul中的position也挺重要，没搞明白里面的原理。

转

tyt叮当tyt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS滑动显示多级菜单

a { text-decoration: none; /*取消下划线*/}#menu ul { list-style: none; /*取消前缀符号*/ padding: 0; border-top: 1px solid #fff; /*border用于设置菜单边界线，可有可无*/ border-left: 1px solid #fff;}#menu ul li { flo
复制链接

扫一扫

专栏目录