关于CSS的下拉菜单

在html中

在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:|| 

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

关于CSS的下拉菜单_第1张图片

你可能感兴趣的:(关于CSS的下拉菜单)