利用HTML，CSS实现动态下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布

NpcCat

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量5.1k

点赞数 9

文章标签： css html

本文链接：https://blog.csdn.net/NpcCat/article/details/105924871

版权

利用HTML，CSS实现动态下拉菜单

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="navmovestyle2.css" />
	</head>
	<body>
		<nav>
			<h1 class="title">Design</h1>
			<ul>
				<li id="text1">text1<b></b></li>
				<li id="text2">text2<b></b></li>
				
				<ul id="list1">
					<li class="content1">text11</li>
					<li class="content1">text12</li>
					<li class="content1">text13</li>
				</ul>
				<ul id="list2">
					<li class="content2">text21</li>
					<li class="content2">text22</li>
					<li class="content2">text23</li>
				</ul>
			</ul>
		</nav>
		
	</body>
</html>

CSS部分

静态部分

*{
	padding: 0;
	margin: 0;
}
body{
	background:  #D6D6D6;
}
nav{
	width: 100%;
	background: #4A4A4A;
	height: 60px;
}
.title,#text1,#text2{
	
	line-height: 60px;
	float: left;
	display: inline-block;
	color: #c3c3c3;
	width: 100px;
	text-align: center;
}
.title{
	color: white;
	width: 120px;
	text-transform: uppercase;
	font-family: FontAwesome;
}
#list1,#list2{
	background: white;
	text-align: center;
	width: 120px;
	list-style: none;
	line-height: 60px;
	border-radius: 5px;
	position: absolute;
	left: 135px;
	top: -120px;
	z-index: -1;
}
#list2{
	left: 235px;
}

动态部分

#text1:hover ~ #list1,#text2:hover ~ #list2{
	top: 60px;
	transition-duration: 0.5s;
}
#list1:hover,#list2:hover{
	top: 60px;
}
.content1:hover,.content2:hover{
	background: #747474;
	border-radius: 5px;
	cursor: pointer;
}

三角符号

b{
	border-style: solid;
	border-width: 5px;
	border-color: white transparent transparent transparent;
	position: relative;
	top: 13px;
	left: 2px;
}

运行效果

在这里插入图片描述

NpcCat

关注

9
点赞
踩
40

收藏

觉得还不错? 一键收藏
2
评论
利用HTML，CSS实现动态下拉菜单

利用HTML，CSS实现动态下拉菜单HTML部分CSS部分静态部分动态部分三角符号运行效果HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="tex...
复制链接

扫一扫