css二级菜单演示

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>css二级菜单演示</title>
  6     <style type="text/css">
  7     <!--
  8     * {
  9         margin:0;
 10         padding:0;
 11         border:0;
 12     }
 13     body {
 14         font-family: arial, 宋体, serif;
 15         font-size:12px;
 16     }
 17     #nav {
 18         line-height: 24px;
 19         list-style-type: none;
 20         background:#666;
 21     }
 22     #nav a {
 23         display: block;
 24         width: 80px;
 25         text-align:center;
 26     }
 27     #nav a:link {
 28         color:#666;
 29         text-decoration:none;
 30     }
 31     #nav a:visited {
 32         color:#666;
 33         text-decoration:none;
 34     }
 35     #nav a:hover {
 36         color:#FFF;
 37         text-decoration:none;
 38         font-weight:bold;
 39     }
 40     #nav li {
 41         float: left;
 42         width: 80px;
 43         background:#CCC;
 44     }
 45     #nav li a:hover {
 46         background:#999;
 47     }
 48     #nav li ul {
 49         line-height: 27px;
 50         list-style-type: none;
 51         text-align:left;
 52         left: -999em;
 53         width: 80px;
 54         position: absolute;
 55     }
 56     #nav li ul li {
 57         float: left;
 58         width: 80px;
 59         background: #F6F6F6;
 60     }
 61     #nav li ul a {
 62         display: block;
 63         width: 80px;
 64         text-align:center
 65     }
 66     #nav li ul a:link {
 67         color:#666;
 68         text-decoration:none;
 69     }
 70     #nav li ul a:visited {
 71         color:#666;
 72         text-decoration:none;
 73     }
 74     #nav li ul a:hover {
 75         color:#F3F3F3;
 76         text-decoration:none;
 77         font-weight:normal;
 78         background:#C00;
 79     }
 80     #nav li:hover ul {
 81         left: auto;
 82     }
 83     #nav li.sfhover ul {
 84         left: auto;
 85     }
 86     #content {
 87         clear: left;
 88     }
 89     -->
 90     </style>
 91     <script type=text/javascript>
 92     <!--//--><![CDATA[//><!--
 93         function menuFix() {
 94             var sfEls = document.getElementById("nav").getElementsByTagName("li");
 95             for (var i=0; i<sfEls.length; i++) {
 96                 sfEls[i].onmouseover=function() {
 97                     this.className+=(this.className.length>0? " ": "") + "sfhover";
 98                 }
 99                 sfEls[i].onMouseDown=function() {
100                     this.className+=(this.className.length>0? " ": "") + "sfhover";
101                 }
102                 sfEls[i].onMouseUp=function() {
103                     this.className+=(this.className.length>0? " ": "") + "sfhover";
104                 }
105                 sfEls[i].onmouseout=function() {
106                     this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
107                 }
108             }
109         }
110         window.onload=menuFix;
111 //--><!]]>
112 </script>
113 </head>
114 <body>
115     <ul id="nav">
116         <li>
117             <a href="#">新浪</a>
118             <ul>
119                 <li>
120                     <a href="#">新浪新闻</a>
121                 </li>
122                 <li>
123                     <a href="#">新浪体育</a>
124                 </li>
125                 <li>
126                     <a href="#">新浪汽车</a>
127                 </li>
128                 <li>
129                     <a href="#">新浪微博</a>
130                 </li>
131                 <li>
132                     <a href="#">新浪科技</a>
133                 </li>
134             </ul>
135         </li>
136         <li>
137             <a href="#">新浪</a>
138             <ul>
139                 <li>
140                     <a href="#">新浪新闻</a>
141                 </li>
142                 <li>
143                     <a href="#">新浪体育</a>
144                 </li>
145                 <li>
146                     <a href="#">新浪汽车</a>
147                 </li>
148                 <li>
149                     <a href="#">新浪微博</a>
150                 </li>
151                 <li>
152                     <a href="#">新浪科技</a>
153                 </li>
154             </ul>
155         </li>
156     </ul>
157 </body>
158 </html>