HBuilder-网页上[更多]菜单制作

妮可珍郝坎

已于 2023-03-02 12:44:29 修改

阅读量323

点赞数 2

文章标签： html css css3

于 2023-03-02 12:24:58 首次发布

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129298418

版权

该功能仅展示鼠标移动做出显现的操作

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				transition: 0.5s;
			}
			ul{
				list-style: none;
				opacity: 0;
			}
			a{
				text-align: center;
				width: 80px;
				display: block;
			}
			.more{
				padding: 5px 10px;
				color: #88f;
			}
			.more:hover{
				background: #aaa;
				color: #ccc;
				text-decoration: none;
			}
			.menu:hover>ul{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<a href="" class="more">更多产品</a>
			<ul>
				<li><a href="http://e.baidu.com/ebaidu/home?refer=889">
						<img src="img/a1.png" alt="">
						<p>浏览器</p>
					</a></li>
				<li><a href="http://music.taihe.com/">
						<img src="img/a2.png" alt="">
						<p>网易云音乐</p>
					</a></li>
				<li><a href="http://image.baidu.com/">
						<img src="img/a3.png" alt="">
						<p>多多看图</p>
					</a></li>
			</ul>
		</div>
	</body>
</html>

效果如下：