程序博客网 > 基本降序算法

CSS实例(九)：多种菜单效果

来源：互联网 发布：基本降序算法 编辑：程序博客网 时间：2024/05/16 07:09
横向下拉菜单
Html代码  收藏代码
  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下拉导航菜单效果
Html代码  收藏代码
  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水平下拉菜单
Html代码  收藏代码
  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. thisthis.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="#"><a href="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a> +</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垂直下拉菜单
Html代码  收藏代码
  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. thisthis.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="#"><a href="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a> +</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实现的中英文双语导航菜单
Html代码  收藏代码
  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> 
基本降序算法 基本降序算法
原创粉丝点击
热门IT博客
mysql distinct 效率mysql distinct 效率
智能电视4k推荐 知乎智能电视4k推荐 知乎
网络穿越剧
软件测试公司
谷歌翻墙需要什么软件
网络共享允许他人查找
c定义二维数组下标越界
男士抓绒外衣淘宝
新浪微博粉丝通知乎
ido视频软件
东莞理工学院网络登录
淘宝网商城男装风衣
景点讲解软件
网络电缆是什么样的
linux必备软件
同华投资软件
cocos2d js下载
端游发展史 知乎
南山软件产业基地一栋
sl会员商城源码
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 玉龙雪山游玩攻略 云南玉龙雪山海拔 玉龙雪山海拔多少米高 玉龙雪山多高 玉龙雪山4680图片 玉龙溪原始森林公园 赤峰玉龙论坛 玉龙雪山一日游报价 玉龙雪山纯玩团 玉龙雪山一日游多少钱 玉龙雪山氧气瓶多少钱 玉龙雪山 纯玩 玉龙雪山票价 玉龙草的价格 玉龙油多少钱 去玉龙雪山要多少钱 玉龙雪山旅游路线 玉龙雪山附近住宿 玉龙雪山婚纱照 玉龙雪山缆车价格 玉龙雪山缆车 玉龙雪山 团购 玉龙雪山蓝月谷一日游 梅里雪山 玉龙雪山 玉龙股份股票行情 玉龙雪山演出 玉龙雪山当地一日游 玉龙雪山自助一日游 玉龙雪山 旅游攻略 玉龙雪山组团 玉龙破碎式打捆机 玉龙打捆机价格 玉龙雪山现在有雪吗 玉龙雪山 学生票 玉龙雪山 自驾游 玉龙雪山自驾游 玉龙雪山什么时候有雪 玉龙雪山有雪吗 玉龙雪山是哪里的 玉龙雪山开放时间 玉龙雪山玩一次多少钱

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里