css制作下拉框(不用js)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="xiala.css"> <title>Document</title> </head> <body> <div class="f1 fl"> <ul> <li class="f3">湖人队 <div class="f2"> <ul> <li>詹姆斯</li> <li>戴维斯</li> <li>格林</li> </ul> </div> </li> <li>快船队</li> <li>76队</li> <li>火箭队</li> <li>凯尔特人队</li> </ul> </div> </body> </html>
*{ margin: 0px; padding: 0px; } body{ font-size: 14px; font-family: "Microsoft Yahei"; color:#000; } .wrap{ margin: 0 auto; } .fl{ float:left; } .fr{ float:right; } .cl::after{ content: ""; display: block; clear: both; } ul,li{ list-style-type: none; } .f1{ width:700px; margin-left: 350px; } .f1 ul li{ width: 125px; height: 50px; line-height: 50px; color: #fff; background: green; text-align: center; float: left; cursor: pointer; position: relative; } .f2{ width: 125px; position: absolute; height: 300px; background-color: red; top: 50px; cursor: pointer; display: none; } .f2 ul li{ height: 100px; line-height: 100px; text-align: center; } .f2 ul li:hover{ background-color: red; color: #fff; } .f1 ul li:hover .f2 { display: block; }