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

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

    • 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;
}

运行效果

利用HTML,CSS实现动态下拉菜单_第1张图片

你可能感兴趣的:(css,html)