CSS网页菜单

  1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
  2     Inherits="WebUserControl" %>
  3 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  5 <head>
  6     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  7     <title>昆明**家政服务公司</title>
  8     <style type="text/css">
  9         *
 10         {
 11             border-style: none;
 12             border-color: inherit;
 13             border-width: 0;
 14             margin: 0;
 15             padding: 0;
 16             height: 51px;
 17         }
 18         body
 19         {
 20             font-family: arial, 宋体, serif;
 21             font-size: 12px;
 22         }
 23         #nav
 24         {
 25             line-height: 24px;
 26             list-style-type: none;
 27             background: #666;
 28         }
 29         #nav a
 30         {
 31             display: block;
 32             width: 80px;
 33             text-align: center;
 34         }
 35         #nav a:link
 36         {
 37             color: #666;
 38             text-decoration: none;
 39         }
 40         #nav a:visited
 41         {
 42             color: #666;
 43             text-decoration: none;
 44         }
 45         #nav a:hover
 46         {
 47             color: #FFF;
 48             text-decoration: none;
 49             font-weight: bold;
 50         }
 51         #nav li
 52         {
 53             float: left;
 54             width: 80px;
 55             background: #CCC;
 56         }
 57         #nav li a:hover
 58         {
 59             background: #999;
 60         }
 61         #nav li ul
 62         {
 63             line-height: 27px;
 64             list-style-type: none;
 65             text-align: left;
 66             left: -999em;
 67             width: 180px;
 68             position: absolute;
 69         }
 70         #nav li ul li
 71         {
 72             float: left;
 73             width: 180px;
 74             background: #F6F6F6;
 75         }
 76         #nav li ul a
 77         {
 78             wedisplay: block;
 79             width: 156px;
 80             text-align: left;
 81             padding-left: 24px;
 82         }
 83         #nav li ul a:link
 84         {
 85             color: #666;
 86             text-decoration: none;
 87         }
 88         #nav li ul a:visited
 89         {
 90             color: #666;
 91             text-decoration: none;
 92         }
 93         #nav li ul a:hover
 94         {
 95             color: #F3F3F3;
 96             text-decoration: none;
 97             font-weight: normal;
 98             background: #C00;
 99         }
100         #nav li:hover ul
101         {
102             left: auto;
103         }
104         #nav li.sfhover ul
105         {
106             left: auto;
107         }
108         #content
109         {
110             clear: left;
111         }
112          #topinfo li{float:right;list-style-type:none;
113         }
114         #topinfo  li a{text-decoration:none;
115                       display:block;padding:5px;
116 
117         }
118      
119     </style>
120     <script type="text/javascript"> 
121 <!--        //--><![CDATA[//><!-- 
122         function menuFix() {
123             var sfEls = document.getElementById("nav").getElementsByTagName("li");
124             for (var i = 0; i < sfEls.length; i++) {
125                 sfEls[i].onmouseover = function () {
126                     this.className += (this.className.length > 0 ? " " : "") + "sfhover";
127                 }
128                 sfEls[i].onMouseDown = function () {
129                     this.className += (this.className.length > 0 ? " " : "") + "sfhover";
130                 }
131                 sfEls[i].onMouseUp = function () {
132                     this.className += (this.className.length > 0 ? " " : "") + "sfhover";
133                 }
134                 sfEls[i].onmouseout = function () {
135                     this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),
136 "");
137                 }
138             }
139         }
140         window.onload = menuFix;
141         //--><!]]> 
142     </script>
143 </head>
144 <body>
145     <table width="100%" >
146     <tr><td width="85%"  class="style1"><h1 align="center">昆明**家政服务公司</h1></td>
147         <td class="style1"><ul id="topinfo" ><li><a href="#">联系我们</a></li><li><a href="#">加入收藏</a></li><li><a href="#">设为首页</a></li></ul></td></tr>
148         <tr>
149             <td>
150                 <ul id="nav">
151                     <li><a href="#">产品介绍</a>
152                         <ul>
153                             <li><a href="#">产品一</a></li>
154                             <li><a href="#">产品一</a></li>
155                             <li><a href="#">产品一</a></li>
156                             <li><a href="#">产品一</a></li>
157                             <li><a href="#">产品一</a></li>
158                             <li><a href="#">产品一</a></li>
159                         </ul>
160                     </li>
161                     <li><a href="#">服务介绍</a>
162                         <ul>
163                             <li><a href="#">服务二</a></li>
164                             <li><a href="#">服务二</a></li>
165                             <li><a href="#">服务二</a></li>
166                             <li><a href="#">服务二服务二</a></li>
167                             <li><a href="#">服务二服务二服务二</a></li>
168                             <li><a href="#">服务二</a></li>
169                         </ul>
170                     </li>
171                     <li><a href="#">成功案例</a>
172                         <ul>
173                             <li><a href="#">案例三</a></li>
174                             <li><a href="#">案例</a></li>
175                             <li><a href="#">案例三案例三</a></li>
176                             <li><a href="#">案例三案例三案例三</a></li>
177                         </ul>
178                     </li>
179                     <li><a href="#">关于我们</a>
180                         <ul>
181                             <li><a href="#">我们四</a></li>
182                             <li><a href="#">我们四</a></li>
183                             <li><a href="#">我们四</a></li>
184                             <li><a href="#">我们四111</a></li>
185                         </ul>
186                     </li>
187                     <li><a href="#">在线演示</a>
188                         <ul>
189                             <li><a href="#">演示</a></li>
190                             <li><a href="#">演示</a></li>
191                             <li><a href="#">演示</a></li>
192                             <li><a href="#">演示演示演示</a></li>
193                             <li><a href="#">演示演示演示</a></li>
194                             <li><a href="#">演示演示</a></li>
195                             <li><a href="#">演示演示演示</a></li>
196                             <li><a href="#">演示演示演示演示演示</a></li>
197                         </ul>
198                     </li>
199                     <li><a href="#">联系我们</a>
200                         <ul>
201                             <li><a href="#">联系联系联系联系联系</a></li>
202                             <li><a href="#">联系联系联系</a></li>
203                             <li><a href="#">联系</a></li>
204                             <li><a href="#">联系联系</a></li>
205                             <li><a href="#">联系联系</a></li>
206                             <li><a href="#">联系联系联系</a></li>
207                             <li><a href="#">联系联系联系</a></li>
208                         </ul>
209                     </li>
210                 </ul>
211             </td>
212         </tr>
213     </table>
214 </body>
215 </html>
View Code
posted @ 2015-05-12 15:25 _York 阅读(184) 评论(0) 收藏举报
刷新页面返回顶部
York

CSS网页菜单

公告
