html css导航栏下拉框,css+html完成下拉框

菜单样式如下：

下拉菜单

.dropdown{

position: relative;

display: inline-block;

}

.dropdown .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:hover .dropdown-content{

display: block;

}

.dropdown-content a{

color: black;

font-family: "微软雅黑", "方正书体", "宋体";

text-decoration: none;

padding: 12px 16px;

display: block;

}

.dropbtn{

background-color: #4CAF50;

color: white;

border: none;

font-size: 16px;

font-family: "微软雅黑", "方正书体", "宋体";

padding: 16px;

cursor: pointer;

}

.dropdown-content a:hover {

background-color: #f1f1f1

}

.dropdown:hover .dropbtn{

background-color: #3e8e41;;

}

下拉菜单

wangzhuo

wangzhuo

wangzhuo