1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>Css制作导航栏上浮动小图标</title> 4 <style> 5 body { 6 font-size:12px; 7 margin:200px; 8 } 9 ul, li { 10 list-style-type:none; 11 margin:0; 12 padding:0; 13 float:left; 14 } 15 #nav { 16 height:30px; 17 width:610px; 18 margin-left:auto; 19 margin-right:auto; 20 } 21 #nav li { 22 margin-left:1px; 23 line-height:30px; 24 background:#ff6600; 25 } 26 #nav li a { 27 display:block; 28 float:left; 29 text-decoration:none; 30 color:#fff; 31 padding:0 10px; 32 } 33 sup { 34 position:absolute; 35 margin-top:-20px; 36 margin-left:-60px; 37 width:50px; 38 height:40px; 39 background-image: url(http://www.xxx.com/images/hot.gif); 40 background-repeat: no-repeat; 41 } 42 </style> 43 </head> 44 <body> 45 <div id="nav"> 46 <ul> 47 <li><a href="http://www.xxx.com">首页</a></li> 48 <li><a href="http://www.xxx.com">导航一</a></li> 49 <li><a href="http://www.xxx.net">导航二</a></li> 50 <li><a href="http://www.xxx.net">导航三</a><sup></sup></li> 51 <li><a href="http://www.xxx.com">导航四</a></li> 52 <li><a href="http://www.xxx.com">导航五</a></li> 53 <li><a href="http://www.xxx.com">导航六</a></li> 54 </ul> 55 </div> 56 </body>