css之二级菜单效果

最新推荐文章于 2023-09-22 15:45:07 发布

云之前端

最新推荐文章于 2023-09-22 15:45:07 发布

阅读量547

点赞数 1

分类专栏：学习总结 css3 文章标签： css 二级菜单

本文链接：https://blog.csdn.net/qq_44586361/article/details/88750982

版权

学习总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

在做之前需要了解的几个小知识点：
a{text-decoration}去掉下划线
float:left左浮动，把一级菜单水平显示
list-style-type:删除小圆点
display:none隐藏二级菜单
display:block显示二级菜单
好了，下面来看我们的代码吧

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
<style type="text/css">
	*{margin:0;padding:0;}
	nav{height:35px;width:60%;margin:0 auto;}
	nav>ul>li{float:left;}
	li{list-style-type:none;width:100px;height:50px;text-align:center;line-height:50px;background:lightblue;text-decoration:none;}
	a{text-decoration:none;}
	nav ul li ul li a{color:black;}
	.submenu{display:none;}
	nav ul li:hover .submenu{display:block;}
	nav ul li:hover{background: red;}
</style>
</head>
<body>
<nav>
<ul class="menu">
	<li>
		<a href="#">首页</a>
	</li>
	<li>
		<a href="#">鞋类</a>
		<ul class="submenu">
			<li><a href="#">运动鞋</a></li>
		    <li><a href="#">休闲鞋</a></li>
		    <li><a href="#">军靴</a></li>
		</ul>
	</li>
	<li>
		<a href="#">服装</a>
		<ul class="submenu">
			<li><a href="#">女装</a></li>
		    <li><a href="#">男装</a></li>
		    <li><a href="#">童装</a></li>
		</ul>
	</li>
	<li>
		<a href="#">耳机</a>
		<ul class="submenu">
			<li><a href="#">小米耳机</a></li>
			<li><a href="#">oppo耳机</a></li>
		</ul>
	</li>
</ul>
</nav>
</body>
</html>

效果图：
在这里插入图片描述

云之前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css之二级菜单效果

在做之前需要了解的几个小知识点：a{text-decoration}去掉下划线float:left左浮动，把一级菜单水平显示list-style-type:删除小圆点display:none隐藏二级菜单display:block显示二级菜单好了，下面来看我们的代码吧<!DOCTYPE html><html><head> <title&g...
复制链接

扫一扫

专栏目录