下拉菜单栏的制作

<!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>

版权声明：本文为qq_50832904原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。