<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; } ul{ list-style: none; } .nav{ width: 960px; overflow: hidden; margin: 0 auto; background-color: purple; border-radius: 5px; } .nav ul li{ float:left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; text-decoration: none; width: 160px; height: 40px; color: white; font-size: 20px; font-family: "Hanzipen SC"; } .nav ul li a:hover{ background: red; font-size: 22px; text-decoration: underline; } </style> </head> <body> <div class="nav"> <ul> <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> <li><a href="">导航</a></li> </ul> </div> </body> </html>