|
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .box{ width: 600px; height: 40px; margin: 0 auto; margin-top: 100px; background-color: rgb(247, 165, 165); } .box li{ float: left; width: 100px; text-align: center; line-height: 40px; } .box li ul{ display: none; } .box li ul li{ background-color: #ccc; border-bottom: 2px solid transparent; } .box li:hover>ul{ display: block; } .box li ul li:hover{ background-color: rgb(135, 192, 43); border-bottom: 2px solid rgb(219, 170, 170); } </style> </head> <body> <ul class="box"> <li> 千峰教育 <ul> <li>千峰教育1</li> <li>千峰教育2</li> <li>千峰教育3</li> <li>千峰教育4</li> <li>千峰教育5</li> </ul> </li> <li> 千峰教育 <ul> <li>千峰教育1</li> <li>千峰教育2</li> <li>千峰教育3</li> <li>千峰教育4</li> </ul> </li> <li> 千峰教育 <ul> <li>千峰教育1</li> <li>千峰教育2</li> <li>千峰教育3</li> </ul> </li> <li> 千峰教育 <ul> <li>千峰育1</li> <li>千峰育2</li> <li>千峰育3</li> </ul> </li> <li> 千峰教育 <ul> <li>千峰1</li> <li>千峰2</li> <li>千峰3</li> <li>千峰3</li> <li>千峰3</li> </ul> </li> <li> 千峰教育 <ul> <li>千峰教1</li> <li>千峰教2</li> <li>千峰教3</li> <li>千峰教3</li> </ul> </li> </ul> </body> </html> |
|
|
