纯CSS实现二级导航菜单效果

#麻辣小龙虾#

已于 2023-04-18 10:11:07 修改

阅读量2.4k

点赞数 2

分类专栏： CSS 文章标签： css

于 2017-08-10 17:02:38 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/77062686

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在项目开发过程中，二级导航菜单效果出现的频率是非常高的，但是一般情况下，很多人第一印象就是使用js，其实CSS也可以实现的，（PS ：一般能使用CSS解决的不要使用js，能用原生js的尽量不用jq（个人观点）。）

效果如下：
这里写图片描述

代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<style>
			#subMenu *{margin:0;padding:0;}
			#subMenu li{list-style-type:none;float:left;width:200px;height:40px;line-height:40px;text-align:center;background:#ccc;}
			#subMenu li a{display:block;}
			#subMenu li a:hover{background:#eee;color:red;}
			#subMenu .dd ul{display:none;}
			#subMenu .dd:hover ul{display:block;}
		</style>
	</head>
	<body>
		<ul id="subMenu">
			<li class="dd">
				<a href="#">导航1</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 class="dd">
				<a href="#">导航2</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 class="dd">
				<a href="#">导航3</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 class="dd">
				<a href="#">导航4</a>
				<ul>
					<li><a href="#">李四导航</a></li>
					<li><a href="#">李四导航</a></li>
					<li><a href="#">李四导航</a></li>
					<li><a href="#">李四导航</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

下雨天，天气终于没那么热了，租不起空调房的孩子晚上睡觉的时候都舒服了好多…

#麻辣小龙虾#

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
纯CSS实现二级导航菜单效果

在项目开发过程中，二级导航菜单效果出现的频率是非常高的，但是一般情况下，很多人第一印象就是使用js，其实CSS也可以实现的，（PS ：一般能使用CSS解决的不要使用js，能用原生js的尽量不用jq（个人观点）。）效果如下：代码如下： demo
复制链接

扫一扫

专栏目录