下拉菜单 - ymlove7

横向下拉菜单

  1 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
  4 <head> 
  5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  6 <meta http-equiv="Content-Language" content="zh-CN" /> 
  7 <title>横向下拉菜单</title> 
  8 <style type="text/css"> 
  9 <!-- 
 10 * {margin:0;padding:0;border:0;} 
 11 body { 
 12 font-family: arial, 宋体, serif; 
 13 font-size:12px; 
 14 } 
 15 #nav { 
 16 height: 24px;  list-style-type: none;  padding-left:200px; 
 17 line-height:24px;overflow:hidden;background:#999; 
 18 } 
 19 #nav a { 
 20 display: block; width: 80px; text-align:center; 
 21 } 
 22 #nav a:link  { 
 23 color:#EEE; text-decoration:none; 
 24 } 
 25 #nav a:visited  { 
 26 color:#EEE;text-decoration:none; 
 27 } 
 28 #nav a:hover  { 
 29 color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; 
 30 } 
 31 #nav li { 
 32 float: left; width: 80px; 
 33 } 
 34 #nav li ul { 
 35 line-height: 24px; 
 36 list-style-type: none; 
 37 text-align:left; 
 38 left: -999px; 
 39 width: 520px; //注意,这里一定要设置宽度; 
 40 position: absolute; 
 41 background:#CCC; 
 42 } 
 43 #nav li ul li{ 
 44 float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float 
 45 } 
 46 #nav li ul a{ 
 47 display: block; width: 65px;text-align:left;padding-left:15px; 
 48 } 
 49 #nav li ul a:link  { 
 50 color:#F1F1F1; text-decoration:none; 
 51 } 
 52 #nav li ul a:visited  { 
 53 color:#F1F1F1;text-decoration:none; 
 54 } 
 55 #nav li ul a:hover  { 
 56 color:#FFF;text-decoration:none;font-weight:normal;background:#C00; 
 57 } 
 58 #nav li:hover ul { 
 59 left:25%; 
 60 } 
 61 #nav li.sfhover ul { 
 62 left:25%; 
 63 } 
 64 #content { 
 65 clear: left; 
 66 } 
 67 --> 
 68 </style> 
 69 <script type=text/javascript><!--//--><![CDATA[//><!-- 
 70 function menuFix() { 
 71 var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
 72 for (var i=0; i<sfEls.length; i++) { 
 73 sfEls[i].onmouseover=function() { 
 74 this.className+=(this.className.length>0? " ": "") + "sfhover"; 
 75 } 
 76 sfEls[i].onMouseDown=function() { 
 77 this.className+=(this.className.length>0? " ": "") + "sfhover"; 
 78 } 
 79 sfEls[i].onMouseUp=function() { 
 80 this.className+=(this.className.length>0? " ": "") + "sfhover"; 
 81 } 
 82 sfEls[i].onmouseout=function() { 
 83 this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
 84 ""); 
 85 } 
 86 } 
 87 } 
 88 window.onload=menuFix; 
 89 //--><!]]></script> 
 90 </head> 
 91 <body> 
 92 <ul id="nav"> 
 93 <li><a href="#">菜单一</a> 
 94 <ul> 
 95 <li><a href="#">菜单一</a></li> 
 96 <li><a href="#">菜单一</a></li> 
 97 <li><a href="#">菜单一</a></li> 
 98 <li><a href="#">菜单一</a></li> 
 99 <li><a href="#">菜单一</a></li> 
100 <li><a href="#">菜单一</a></li> 
101 </ul> 
102 </li> 
103 <li><a href="#">菜单二</a> 
104 <ul> 
105 <li><a href="#">菜单二</a></li> 
106 <li><a href="#">菜单二</a></li> 
107 <li><a href="#">菜单二</a></li> 
108 <li><a href="#">菜单二</a></li> 
109 <li><a href="#">菜单二</a></li> 
110 </ul> 
111 </li> 
112 <li><a href="#">菜单三</a> 
113 <ul> 
114 <li><a href="#">菜单三</a></li> 
115 <li><a href="#">菜单三</a></li> 
116 <li><a href="#">菜单三</a></li> 
117 <li><a href="#">菜单三</a></li> 
118 <li><a href="#">菜单三</a></li> 
119 </ul> 
120 </li> 
121 <li><a href="#">菜单四</a> 
122 <ul> 
123 <li><a href="#">菜单四</a></li> 
124 <li><a href="#">菜单四</a></li> 
125 <li><a href="#">菜单四</a></li> 
126 <li><a href="#">菜单四</a></li> 
127 <li><a href="#">菜单四</a></li> 
128 </ul> 
129 </li> 
130 <li><a href="#">菜单五</a> 
131 <ul> 
132 <li><a href="#">菜单五</a></li> 
133 <li><a href="#">菜单五</a></li> 
134 <li><a href="#">菜单五</a></li> 
135 <li><a href="#">菜单五</a></li> 
136 <li><a href="#">菜单五</a></li> 
137 </ul> 
138 </li> 
139 <li><a href="#">菜单六</a> 
140 <ul> 
141 <li><a href="#">菜单六</a></li> 
142 <li><a href="#">菜单六</a></li> 
143 <li><a href="#">菜单六</a></li> 
144 <li><a href="#">菜单六</a></li> 
145 <li><a href="#">菜单六</a></li> 
146 </ul> 
147 </li> 
148 </ul> 
149 </div> 
150 </body> 
151 </html>

横向下拉菜单

CSS下拉导航菜单效果

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

CSS下拉导航菜单效果

CSS水平下拉菜单

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2 <html xmlns="http://www.w3.org/1999/xhtml"> 
  3 <head> 
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5 <title>CSS Menu - Horizontal</title> 
  6 <style type="text/css"> 
  7 <!-- 
  8 @import"dhtml-horiz.css"; 
  9 --> 
 10 body { 
 11 margin: 0; 
 12 padding: 30px; 
 13 background: #FFF; 
 14 color: #666; 
 15 } 
 16 h1 { 
 17 font: bold 16px Arial, Helvetica, sans-serif; 
 18 } 
 19 p { 
 20 font: 11px Arial, Helvetica, sans-serif; 
 21 } 
 22 a { 
 23 color: #900; 
 24 text-decoration: none; 
 25 } 
 26 a:hover { 
 27 background: #900; 
 28 color: #FFF; 
 29 } 
 30 /*CSS Code for Menu Begin:*/ 
 31 /* Root = Horizontal, Secondary = Vertical */ 
 32 ul#navmenu { 
 33 margin: 0; 
 34 border: 0 none; 
 35 padding: 0; 
 36 width: 500px; /*For KHTML*/ 
 37 list-style: none; 
 38 height: 24px; 
 39 } 
 40 ul#navmenu li { 
 41 margin: 0; 
 42 border: 0 none; 
 43 padding: 0; 
 44 float: left; /*For Gecko*/ 
 45 display: inline; 
 46 list-style: none; 
 47 position: relative; 
 48 height: 24px; 
 49 } 
 50 ul#navmenu ul { 
 51 margin: 0; 
 52 border: 0 none; 
 53 padding: 0; 
 54 width: 160px; 
 55 list-style: none; 
 56 display: none; 
 57 position: absolute; 
 58 top: 24px; 
 59 left: 0; 
 60 } 
 61 ul#navmenu ul li { 
 62 float: none; /*For Gecko*/ 
 63 display: block !important; 
 64 display: inline; /*For IE*/ 
 65 } 
 66 /* Root Menu */ 
 67 ul#navmenu a { 
 68 border: 1px solid #FFF; 
 69 border-right-color: #CCC; 
 70 border-bottom-color: #CCC; 
 71 padding: 0 6px; 
 72 float: none !important; /*For Opera*/ 
 73 float: left; /*For IE*/ 
 74 display: block; 
 75 background: #EEE; 
 76 color: #666; 
 77 font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
 78 text-decoration: none; 
 79 height: auto !important; 
 80 height: 1%; /*For IE*/ 
 81 } 
 82 /* Root Menu Hover Persistence */ 
 83 ul#navmenu a:hover, 
 84 ul#navmenu li:hover a, 
 85 ul#navmenu li.iehover a { 
 86 background: #CCC; 
 87 color: #FFF; 
 88 } 
 89 /* 2nd Menu */ 
 90 ul#navmenu li:hover li a, 
 91 ul#navmenu li.iehover li a { 
 92 float: none; 
 93 background: #EEE; 
 94 color: #666; 
 95 } 
 96 /* 2nd Menu Hover Persistence */ 
 97 ul#navmenu li:hover li a:hover, 
 98 ul#navmenu li:hover li:hover a, 
 99 ul#navmenu li.iehover li a:hover, 
100 ul#navmenu li.iehover li.iehover a { 
101 background: #CCC; 
102 color: #FFF; 
103 } 
104 /* 3rd Menu */ 
105 ul#navmenu li:hover li:hover li a, 
106 ul#navmenu li.iehover li.iehover li a { 
107 background: #EEE; 
108 color: #666; 
109 } 
110 /* 3rd Menu Hover Persistence */ 
111 ul#navmenu li:hover li:hover li a:hover, 
112 ul#navmenu li:hover li:hover li:hover a, 
113 ul#navmenu li.iehover li.iehover li a:hover, 
114 ul#navmenu li.iehover li.iehover li.iehover a { 
115 background: #CCC; 
116 color: #FFF; 
117 } 
118 /* 4th Menu */ 
119 ul#navmenu li:hover li:hover li:hover li a, 
120 ul#navmenu li.iehover li.iehover li.iehover li a { 
121 background: #EEE; 
122 color: #666; 
123 } 
124 /* 4th Menu Hover */ 
125 ul#navmenu li:hover li:hover li:hover li a:hover, 
126 ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
127 background: #CCC; 
128 color: #FFF; 
129 } 
130 ul#navmenu ul ul, 
131 ul#navmenu ul ul ul { 
132 display: none; 
133 position: absolute; 
134 top: 0; 
135 left: 160px; 
136 } 
137 /* Do Not Move - Must Come Before display:block for Gecko */ 
138 ul#navmenu li:hover ul ul, 
139 ul#navmenu li:hover ul ul ul, 
140 ul#navmenu li.iehover ul ul, 
141 ul#navmenu li.iehover ul ul ul { 
142 display: none; 
143 } 
144 ul#navmenu li:hover ul, 
145 ul#navmenu ul li:hover ul, 
146 ul#navmenu ul ul li:hover ul, 
147 ul#navmenu li.iehover ul, 
148 ul#navmenu ul li.iehover ul, 
149 ul#navmenu ul ul li.iehover ul { 
150 display: block; 
151 } 
152 </style> 
153 <script type="text/JavaScript"> 
154 navHover = function() { 
155 var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
156 for (var i=0; i<lis.length; i++) { 
157 lis[i].onmouseover=function() { 
158 this.className+=" iehover"; 
159 } 
160 lis[i].onmouseout=function() { 
161 this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
162 } 
163 } 
164 } 
165 if (window.attachEvent) window.attachEvent("onload", navHover); 
166 </script> 
167 </head> 
168 <body> 
169 <h1>CSS Menu - Horizontal</h1> 
170 <hr /> 
171 <ul id="navmenu"> 
172 <li><a href="#">Blog</a></li> 
173 <li><a href="#">Work +</a> 
174 <ul> 
175 <li><a href="#">Websites +</a> 
176 <ul> 
177 <li><a href="#">qrayg</a></li> 
178 <li><a href="#">qArcade</a></li> 
179 <li><a href="#">qLoM</a></li> 
180 <li><a href="#">qDT</a></li> 
181 </ul> 
182 </li> 
183 <li><a href="#">Pen and Ink</a></li> 
184 <li><a href="#">Free Interfaces</a></li> 
185 </ul> 
186 </li> 
187 <li><a href="#">Learn +</a> 
188 <ul> 
189 <li><a href="#">Fireworks +</a> 
190 <ul> 
191 <li><a href="#">aquaButton</a></li> 
192 <li><a href="#">aquaButton2</a></li> 
193 <li><a href="#">waterDrop</a></li> 
194 <li><a href="#">lightFX</a></li> 
195 <li><a href="#">lightFX2</a></li> 
196 </ul> 
197 </li> 
198 <li><a href="#">CSS +</a> 
199 <ul> 
200 <li><a href="#">footerStick</a></li> 
201 <li><a href="#">spriteNav</a></li> 
202 <li><a href="#">@import</a></li> 
203 </ul> 
204 </li> 
205 </ul> 
206 </li> 
207 <li><a href="#">Info</a></li> 
208 <li><a href="#">Contact</a></li> 
209 </ul> 
210 </body> 
211 </html>

CSS水平下拉菜单

CSS垂直下拉菜单

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2 <html xmlns="http://www.w3.org/1999/xhtml"> 
  3 <head> 
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5 <title>CSS Menu - Vertical</title> 
  6 <style type="text/css"> 
  7 body { 
  8 margin: 0; 
  9 padding: 30px; 
 10 background: #FFF; 
 11 color: #666; 
 12 } 
 13 h1 { 
 14 font: bold 16px Arial, Helvetica, sans-serif; 
 15 } 
 16 p { 
 17 font: 11px Arial, Helvetica, sans-serif; 
 18 } 
 19 a { 
 20 color: #900; 
 21 text-decoration: none; 
 22 } 
 23 a:hover { 
 24 background: #900; 
 25 color: #FFF; 
 26 } 
 27 /*CSS Code for Menu Begin:*/ 
 28 /* Root = Vertical, Secondary = Vertical */ 
 29 ul#navmenu, 
 30 ul#navmenu li, 
 31 ul#navmenu ul { 
 32 margin: 0; 
 33 border: 0 none; 
 34 padding: 0; 
 35 width: 160px; /*For KHTML*/ 
 36 list-style: none; 
 37 } 
 38 ul#navmenu li { 
 39 display: block !important; /*For GOOD browsers*/ 
 40 display: inline; /*For IE*/ 
 41 position: relative; 
 42 } 
 43 /* Root Menu */ 
 44 ul#navmenu a { 
 45 border: 1px solid #FFF; 
 46 border-right-color: #CCC; 
 47 border-bottom-color: #CCC; 
 48 padding: 0 6px; 
 49 display: block; 
 50 background: #EEE; 
 51 color: #666; 
 52 font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 
 53 text-decoration: none; 
 54 height: auto !important; 
 55 height: 1%; /*For IE*/ 
 56 } 
 57 /* Root Menu Hover Persistence */ 
 58 ul#navmenu a:hover, 
 59 ul#navmenu li:hover a, 
 60 ul#navmenu li.iehover a { 
 61 background: #CCC; 
 62 color: #FFF; 
 63 } 
 64 /* 2nd Menu */ 
 65 ul#navmenu li:hover li a, 
 66 ul#navmenu li.iehover li a { 
 67 background: #EEE; 
 68 color: #666; 
 69 } 
 70 /* 2nd Menu Hover Persistence */ 
 71 ul#navmenu li:hover li a:hover, 
 72 ul#navmenu li:hover li:hover a, 
 73 ul#navmenu li.iehover li a:hover, 
 74 ul#navmenu li.iehover li.iehover a { 
 75 background: #CCC; 
 76 color: #FFF; 
 77 } 
 78 /* 3rd Menu */ 
 79 ul#navmenu li:hover li:hover li a, 
 80 ul#navmenu li.iehover li.iehover li a { 
 81 background: #EEE; 
 82 color: #666; 
 83 } 
 84 /* 3rd Menu Hover Persistence */ 
 85 ul#navmenu li:hover li:hover li a:hover, 
 86 ul#navmenu li:hover li:hover li:hover a, 
 87 ul#navmenu li.iehover li.iehover li a:hover, 
 88 ul#navmenu li.iehover li.iehover li.iehover a { 
 89 background: #CCC; 
 90 color: #FFF; 
 91 } 
 92 /* 4th Menu */ 
 93 ul#navmenu li:hover li:hover li:hover li a, 
 94 ul#navmenu li.iehover li.iehover li.iehover li a { 
 95 background: #EEE; 
 96 color: #666; 
 97 } 
 98 /* 4th Menu Hover */ 
 99 ul#navmenu li:hover li:hover li:hover li a:hover, 
100 ul#navmenu li.iehover li.iehover li.iehover li a:hover { 
101 background: #CCC; 
102 color: #FFF; 
103 } 
104 ul#navmenu ul, 
105 ul#navmenu ul ul, 
106 ul#navmenu ul ul ul { 
107 display: none; 
108 position: absolute; 
109 top: 0; 
110 left: 160px; 
111 } 
112 /* Do Not Move - Must Come Before display:block for Gecko */ 
113 ul#navmenu li:hover ul ul, 
114 ul#navmenu li:hover ul ul ul, 
115 ul#navmenu li.iehover ul ul, 
116 ul#navmenu li.iehover ul ul ul { 
117 display: none; 
118 } 
119 ul#navmenu li:hover ul, 
120 ul#navmenu ul li:hover ul, 
121 ul#navmenu ul ul li:hover ul, 
122 ul#navmenu li.iehover ul, 
123 ul#navmenu ul li.iehover ul, 
124 ul#navmenu ul ul li.iehover ul { 
125 display: block; 
126 } 
127 </style> 
128 <script type="text/javascript"> 
129 <!-- 
130 navHover = function() { 
131 var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
132 for (var i=0; i<lis.length; i++) { 
133 lis[i].onmouseover=function() { 
134 this.className+=" iehover"; 
135 } 
136 lis[i].onmouseout=function() { 
137 this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
138 } 
139 } 
140 } 
141 if (window.attachEvent) window.attachEvent("onload", navHover); 
142 --> 
143 </script> 
144 </head> 
145 <body> 
146 <h1>CSS Menu - Vertical</h1> 
147 <hr /> 
148 <ul id="navmenu"> 
149 <li><a href="#">Blog</a></li> 
150 <li><a href="#">Work +</a> 
151 <ul> 
152 <li><a href="#">Websites +</a> 
153 <ul> 
154 <li><a href="#">qrayg</a></li> 
155 <li><a href="#">qArcade</a></li> 
156 <li><a href="#">qLoM</a></li> 
157 <li><a href="#">qDT</a></li> 
158 </ul> 
159 </li> 
160 <li><a href="#">Pen and Ink</a></li> 
161 <li><a href="#">Free Interfaces</a></li> 
162 </ul> 
163 </li> 
164 <li><a href="#">Learn +</a> 
165 <ul> 
166 <li><a href="#">Fireworks +</a> 
167 <ul> 
168 <li><a href="#">aquaButton</a></li> 
169 <li><a href="#">aquaButton2</a></li> 
170 <li><a href="#">waterDrop</a></li> 
171 <li><a href="#">lightFX</a></li> 
172 <li><a href="#">lightFX2</a></li> 
173 </ul> 
174 </li> 
175 <li><a href="#">CSS +</a> 
176 <ul> 
177 <li><a href="#">footerStick</a></li> 
178 <li><a href="#">spriteNav</a></li> 
179 <li><a href="#">@import</a></li> 
180 </ul> 
181 </li> 
182 </ul> 
183 </li> 
184 <li><a href="#">Info</a></li> 
185 <li><a href="#">Contact</a></li> 
186 </ul> 
187 </body> 
188 </html>

CSS垂直下拉菜单

CSS实现的中英文双语导航菜单

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 3 <head> 
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 5 <meta name="Keywords" content="bilingual menu,中英文双语菜单" /> 
 6 <meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> 
 7 <meta content="all" name="robots" /> 
 8 <meta name="author" content="forestgan" /> 
 9 <meta name="copyright" content="http://www.forest53.com" /> 
10 <title>完全用CSS实现的中英文双语导航菜单</title> 
11 <style type="text/css"> 
12 a{ 
13 color: #FFFF99; 
14 text-decoration: none; 
15 } 
16 a:hover{ 
17 color: #FFFFFF; 
18 text-decoration: underline; 
19 } 
20 #nav{ 
21 padding: 10px 10px 0; 
22 font-size: 12px; 
23 font-weight: bold; 
24 margin: 1em 0 0; 
25 list-style:none; 
26 } 
27 #nav li{ 
28 float: left; 
29 margin-right: 1px; 
30 } 
31 .bi{ 
32 position: relative; 
33 z-index: 0; 
34 } 
35 .bi:hover{ 
36 z-index: 99; 
37 } 
38 .bi:hover span{ 
39 visibility: visible; 
40 top: 0; 
41 left: 0; 
42 cursor: pointer; 
43 } 
44 .bi span{ 
45 position: absolute; 
46 left: -999em; 
47 visibility: hidden; 
48 } 
49 #nav li a,.bi:hover span{ 
50 line-height: 20px; 
51 text-decoration: none; 
52 background: #DDDDDD; 
53 color: #666666; 
54 display: block; 
55 width: 80px; 
56 text-align: center; 
57 } 
58 #nav li a:hover,.bi:hover span{ 
59 color: #FFFFFF; 
60 background: #DC4E1B; 
61 } 
62 .bi:hover span{ 
63 padding-top: 2px; 
64 } 
65 #navbar{ 
66 background: #DC4E1B; 
67 height: 8px; 
68 overflow: hidden; 
69 clear: both; 
70 } 
71 </style> 
72 <link href="../css/main.css" rel="stylesheet" type="text/css" /> 
73 </head> 
74 <body> 
75 <div id="top"> 
76 <ul id="nav"> 
77 <li><a class="bi" href="Http://www.junstudio.org/">Home<span>首　页</span></a></li> 
78 <li><a class="bi" href="Http://www.junstudio.org/blog">Blog<span>日志</span></a></li> 
79 <li><a class="bi" href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li> 
80 <li><a class="bi" href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li> 
81 <li><a class="bi" href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li> 
82 </ul> 
83 <div id="navbar"></div> 
84 </body> 
85 </html>

CSS实现的中英文双语导航菜单

posted on 2014-06-01 10:04 ymlove7 阅读(172) 评论(0) 收藏举报