下拉菜单栏的制作

最新推荐文章于 2022-08-11 20:11:04 发布

基本模型与排列组合

最新推荐文章于 2022-08-11 20:11:04 发布

阅读量502

点赞数

分类专栏：前端培训

本文链接：https://blog.csdn.net/qq_50832904/article/details/118400469

版权

前端培训专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!Doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this is the title</title>
		<style>
			.entertainment{
				width: 100px;
				height: 40px;
				background-color: #ccc;
				line-height: 40px;
				text-align: center;
				/*display: inline;*/
			}
			.movie{
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #ccc;
				display: none;
			}
	 		#show{
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #ccc;
				display: none;
			}

			.entertainment:hover .movie{
				display: block;
				
			}
			.entertainment:hover #show{
				display: block;
			}
			.entertainment:hover{
				background-color: yellow;
			}

/*			//这是错误的写法，不起错用，{}不能嵌套
			.entertainment:hover
			{
				.movie{
					display: block;	
				}
				#show{
					display: block;
				}
				background-color: yellow;
			} 
			.entertainment:hover 
			}*/

			.movie:hover{
				background-color: green;
			}
			#show:hover{
				background-color: red;
			}


		</style>
	</head>
	<body>
		<div class="entertainment">
			==娱乐==
			<div class="movie">电影</div>
			<div id="show">综艺</div>			
		</div>
	</body>
</html>

基本模型与排列组合

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
下拉菜单栏的制作

<!Doctype html><html> <head> <meta charset="utf-8"> <title>this is the title</title> <style> .entertainment{ width: 100px; height: 40px; background-color: #ccc; line-height: 40px; te.
复制链接

扫一扫