代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } ul { list-style: none; } a { text-decoration: none; color: #ccc; } .top-nav { width: 100%; height: 70px; background-color: #242424; } .top-nav ul { padding-left: 100px; } .top-nav ul li { /* 并排 */ display: inline-block; } .black { background-color: #000; } .top-nav li:hover { background-color: #000; } /* 鼠标移入li元素 选择li的后代a元素 */ .top-nav li:hover a { color:#fff; } .top-nav li a { /* 行内---》块 设置宽高 */ display: block; padding: 0px 20px; line-height: 70px; } </style> </head> <body> <div class="top-nav"> <ul> <li class="black"><a href="">发现音乐</a></li> <li><a href="">我的音乐</a></li> <li><a href="">朋友</a></li> <li><a href="">商城</a></li> <li><a href="">音乐人</a></li> <li><a href="">下载客户端</a></li> </ul> </div> </body> </html>