关于CSS的下拉菜单

在html中

<div class="plat">
	<button class="nav">下拉菜单</button>
	<div class="content">
		<a href="#">新闻</a>
		<a href="#">游戏</a>
		<a href="#">歌曲</a>
	</div>
</div>

在CSS中

/*设置nav中的背景颜色，字体太小，内边距，字体
颜色，*/
.nav{
    background-color: yellow;
    font-size: 30px;
    padding:10px;
    color: red;
    border:none;
    cursor: pointer;/*当鼠标移到下拉菜单的时候，鼠标为手的光标。*/
}
.plat{
	position: relative;/*把父级plat作为相对位置*/
    display: inline-block;
}
.content{
	display: none;/*隐藏链接a*/
	position:absolute;/*把plat作为父级元素进行移动，移动后将脱离原来自己的位置*/
	background-color: gray;/*content的背景颜色*/
	min-width: 100px;/*content最少的宽度*/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*box-shadow用法总结
box-shadow：<length><length><length><length>|| <color>

<length><length><length>?<length>? || <color>：阴影水平偏移值（可取正负值）；
阴影垂直偏移值（可取正负值）；阴影边框；阴影模糊值；阴影颜色 */
}
.content a{
	color: black;/*链接的字体颜色*/
    padding: 12px 16px;/*链接的内边距*/
    text-decoration: none;/*消除链接中的下划线*/
    display: block;/*将链接分行*/
}
.content a:hover{
	background-color: blue;/*当鼠标的光标移向链接时候，链接的背景颜色*/
}
.plat:hover .content {
    display: block;
}