CSS_下拉菜单&提示工具

最新推荐文章于 2022-12-12 09:20:07 发布

「已注销」

最新推荐文章于 2022-12-12 09:20:07 发布

阅读量320

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/dolola/article/details/79180707

版权

HTML学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

大概分三个部分。

常驻内容（词贫）

就是一直显示的那种。

用div包裹起来（这里的div需要包裹第二个部分，也就是下拉内容）

position:relatove;
display:inline-block;

下拉内容

同样用一个div标签包裹到上一个div中。

position:absolute;
display:hidden;

激活

指针指上去会触发下拉菜单，通过选择器实现。

.button:hover .content
		{
			display:block;
		}

练习代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>practice</title> 

<style>
		.button
		{
			background-color:gray;
			position:relative;
			display:inline-block;
		}
		.content
		{
			position:absolute;
			min-width:50px;
			background-color:yellow;
			display:none;
			padding:12px 16px;
		}
		.button:hover .content
		{
			display:block;
		}
</style>
	
</head>

<body>
	<div class="button">
		点我
		<div class="content">
			<p><a href="#">点一下</a></p>
			<p><a href="#">点一下</a></p>
			<p><a href="#">点一下</a></p>
			<p><a href="#">点一下</a></p>
		</div>	
	</div>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_下拉菜单&提示工具

大概分三个部分。常驻内容（词贫）就是一直显示的那种。用div包裹起来（这里的div需要包裹第二个部分，也就是下拉内容）position:relatove;display:inline-block;下拉内容同样用一个div标签包裹到上一个div中。position:absolute;display:hidden;激活指针指上去会触发下拉菜单，通过选择器
复制链接

扫一扫