css创建鼠标悬停下拉菜单样式

下拉菜单在网站中到处可见。

下面用css设置下拉菜单样式。




淘宝




 css来设置样式

.dropdown-content {
    display: none;//隐藏下拉菜单的内容
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;最小宽度
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//做边框阴影
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
//hover设置光标悬停未点击之前的样式

.dropdown:hover .dropdown-content {
    display: block;
}//鼠标悬停显示下拉菜单

.dropdown:hover .dropbtn {
    background-color: #f5f5f5;
}

 

你可能感兴趣的:(CSS)