CSS 实现鼠标悬停上弹出二级菜单（一）

最新推荐文章于 2024-05-13 23:35:43 发布

凌冰_

最新推荐文章于 2024-05-13 23:35:43 发布

阅读量6.4k

点赞数 6

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/108473652

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

效果:

HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				/* 相对定位-父 */
				position: relative;
			}

			.one li {
				margin: 10px;
			
			}

			/* 隐藏 */
			.one ul {
				/* 绝对定位-子 */
				position: absolute;
				background: #CCCCCC;
				display: none;
			}

			/* 显示 */
			.one li:hover ul {
				display: block;
			}
		</style>
	</head>
	<body>
		<ul class="one">
			<li><a href="#">aaa</a>
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</li>
			<li><a href="#">bbb</a>
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</li>
			<li><a href="#">ccc</a>
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

凌冰_

关注关注

6
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现鼠标悬停上弹出二级菜单（一）

效果:HTML页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; display: flex; ..
复制链接

扫一扫