代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航条</title> <style type="text/css"> .menu{ list-style: none; padding:0; margin:0; width:960px; height:40px; background-color:#55a8ea; position:relative; } .menu li{ width:100px; height:40px; float:left; } .menu li a{ display:block; height:40px; width:100px; line-height:40px; text-align:center; font-size:14px; font-family:"Microsoft YaHei"; text-decoration:none; color:#ffff; } .menu li a:hover{ background-color:#00619f; } .menu .new{ width:30px; height:20px; background:url("images/new3.png") no-repeat; position:absolute; left:433px; top:-10px; } </style> </head> <body> <ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">网站建设</a></li> <li><a href="#">程序开发</a></li> <li><a href="#">网络营销</a></li> <li><a href="#">企业VI</a></li> <li><a href="#">案例展示</a></li> <li><a href="#">联系我们</a></li> <li class="new"></li> </ul> </body> </html>
页面效果：