@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也会随之改变。