@charset "utf-8";
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.selectbox {
width: 700px;
margin: 0 auto;
}
input {
cursor: pointer;
width: 200px;
height: 25px;
}
.selemediv {
width: 180px;
height: 35px;
float: left;
margin-top: 30px;
margin-left: 30px;
position: relative
}
.insuranceList {
box-shadow: 0px 0px 1px 1px #ccc;
font-size: 14px;
color: #666;
padding: 20px 40px;
position: absolute;
top: 35px;
left: 0;
background: #fff;
border-bottom: 1px solid #f6f6f6;
display: none;
border-radius: 5px;
}
.insuranceList ul {
float: left;
width: 500px;
line-height: 54px;
}
.insuranceList ul li {
float: left;
cursor: pointer
}
.insuranceList ul li:hover {
color: dodgerblue
}
.insuranceList li {
width: 25%;
}
.insuranceList .leibie {
width: 80px;
float: left;
line-height: 54px;
}
ul,
li {
list-style: none;
}
.insuranceList .active {
color: #fff;
background-color: dodgerblue;
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
}
.insuranceType1,
.insuranceType2 {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
font: normal bold 16px/24px arial, sans-serif;
cursor: pointer
}
.typeList1 ._active {
color: dodgerblue;
}
.typeList2 ._active {
color: dodgerblue;
}选择父项可以获取父项的值,再选择对应的子项会获取到父子两个的值;点击父子项相对应的active也会随之改变。