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>
