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

于 2013-08-19 22:30:00 发布
阅读量152 收藏
点赞数
文章标签： xhtml javascript ViewUI
横向下拉菜单
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBliC"-//W3C//DTDXHTML1.0Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
  4. <head>
  5. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  6. <metahttp-equiv="Content-Language"content="zh-CN"/>
  7. <title>横向下拉菜单</title>
  8. <styletype="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. #nava{
  20. display:block;width:80px;text-align:center;
  21. }
  22. #nava:link{
  23. color:#EEE;text-decoration:none;
  24. }
  25. #nava:visited{
  26. color:#EEE;text-decoration:none;
  27. }
  28. #nava:hover{
  29. color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
  30. }
  31. #navli{
  32. float:left;width:80px;
  33. }
  34. #navliul{
  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. #navliulli{
  44. float:left;width:80px;//float就是子菜单横向的关键,可以继承父菜单而省略float
  45. }
  46. #navliula{
  47. display:block;width:65px;text-align:left;padding-left:15px;
  48. }
  49. #navliula:link{
  50. color:#F1F1F1;text-decoration:none;
  51. }
  52. #navliula:visited{
  53. color:#F1F1F1;text-decoration:none;
  54. }
  55. #navliula:hover{
  56. color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
  57. }
  58. #navli:hoverul{
  59. left:25%;
  60. }
  61. #navli.sfhoverul{
  62. left:25%;
  63. }
  64. #content{
  65. clear:left;
  66. }
  67. -->
  68. </style>
  69. <scripttype=text/javascript><!--//--><![CDATA[//><!--
  70. functionmenuFix(){
  71. varsfEls=document.getElementById("nav").getElementsByTagName("li");
  72. for(vari=0;i<sfEls.length;i++){
  73. sfEls[i].οnmοuseοver=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].οnmοuseοut=function(){
  83. this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),
  84. "");
  85. }
  86. }
  87. }
  88. window.οnlοad=menuFix;
  89. //--><!]]></script>
  90. </head>
  91. <body>
  92. <ulid="nav">
  93. <li><ahref="#">菜单一</a>
  94. <ul>
  95. <li><ahref="#">菜单一</a></li>
  96. <li><ahref="#">菜单一</a></li>
  97. <li><ahref="#">菜单一</a></li>
  98. <li><ahref="#">菜单一</a></li>
  99. <li><ahref="#">菜单一</a></li>
  100. <li><ahref="#">菜单一</a></li>
  101. </ul>
  102. </li>
  103. <li><ahref="#">菜单二</a>
  104. <ul>
  105. <li><ahref="#">菜单二</a></li>
  106. <li><ahref="#">菜单二</a></li>
  107. <li><ahref="#">菜单二</a></li>
  108. <li><ahref="#">菜单二</a></li>
  109. <li><ahref="#">菜单二</a></li>
  110. </ul>
  111. </li>
  112. <li><ahref="#">菜单三</a>
  113. <ul>
  114. <li><ahref="#">菜单三</a></li>
  115. <li><ahref="#">菜单三</a></li>
  116. <li><ahref="#">菜单三</a></li>
  117. <li><ahref="#">菜单三</a></li>
  118. <li><ahref="#">菜单三</a></li>
  119. </ul>
  120. </li>
  121. <li><ahref="#">菜单四</a>
  122. <ul>
  123. <li><ahref="#">菜单四</a></li>
  124. <li><ahref="#">菜单四</a></li>
  125. <li><ahref="#">菜单四</a></li>
  126. <li><ahref="#">菜单四</a></li>
  127. <li><ahref="#">菜单四</a></li>
  128. </ul>
  129. </li>
  130. <li><ahref="#">菜单五</a>
  131. <ul>
  132. <li><ahref="#">菜单五</a></li>
  133. <li><ahref="#">菜单五</a></li>
  134. <li><ahref="#">菜单五</a></li>
  135. <li><ahref="#">菜单五</a></li>
  136. <li><ahref="#">菜单五</a></li>
  137. </ul>
  138. </li>
  139. <li><ahref="#">菜单六</a>
  140. <ul>
  141. <li><ahref="#">菜单六</a></li>
  142. <li><ahref="#">菜单六</a></li>
  143. <li><ahref="#">菜单六</a></li>
  144. <li><ahref="#">菜单六</a></li>
  145. <li><ahref="#">菜单六</a></li>
  146. </ul>
  147. </li>
  148. </ul>
  149. </div>
  150. </body>
  151. </html>


CSS下拉导航菜单效果
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBliC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <title>CSS下拉菜单演示</title>
  6. <styletype="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. #nava{
  17. display:block;width:80px;text-align:center;
  18. }
  19. #nava:link{
  20. color:#666;text-decoration:none;
  21. }
  22. #nava:visited{
  23. color:#666;text-decoration:none;
  24. }
  25. #nava:hover{
  26. color:#FFF;text-decoration:none;font-weight:bold;
  27. }
  28. #navli{
  29. float:left;width:80px;background:#CCC;
  30. }
  31. #navlia:hover{
  32. background:#999;
  33. }
  34. #navliul{
  35. line-height:27px;list-style-type:none;text-align:left;
  36. left:-999em;width:180px;position:absolute;
  37. }
  38. #navliulli{
  39. float:left;width:180px;
  40. background:#F6F6F6;
  41. }
  42. #navliula{wedisplay:block;width:156px;text-align:left;padding-left:24px;
  43. }
  44. #navliula:link{
  45. color:#666;text-decoration:none;
  46. }
  47. #navliula:visited{
  48. color:#666;text-decoration:none;
  49. }
  50. #navliula:hover{
  51. color:#F3F3F3;text-decoration:none;font-weight:normal;
  52. background:#C00;
  53. }
  54. #navli:hoverul{
  55. left:auto;
  56. }
  57. #navli.sfhoverul{
  58. left:auto;
  59. }
  60. #content{
  61. clear:left;
  62. }
  63. -->
  64. </style>
  65. <scripttype=text/javascript>
  66. <!--//--><![CDATA[//><!--
  67. functionmenuFix(){
  68. varsfEls=document.getElementById("nav").getElementsByTagName("li");
  69. for(vari=0;i<sfEls.length;i++){
  70. sfEls[i].οnmοuseοver=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].οnmοuseοut=function(){
  80. this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),
  81. "");
  82. }
  83. }
  84. }
  85. window.οnlοad=menuFix;
  86. //--><!]]>
  87. </script>
  88. </head>
  89. <body>
  90. <ulid="nav">
  91. <li><ahref="#">产品介绍</a>
  92. <ul>
  93. <li><ahref="#">产品一</a></li>
  94. <li><ahref="#">产品一</a></li>
  95. <li><ahref="#">产品一</a></li>
  96. <li><ahref="#">产品一</a></li>
  97. <li><ahref="#">产品一</a></li>
  98. <li><ahref="#">产品一</a></li>
  99. </ul>
  100. </li>
  101. <li><ahref="#">服务介绍</a>
  102. <ul>
  103. <li><ahref="#">服务二</a></li>
  104. <li><ahref="#">服务二</a></li>
  105. <li><ahref="#">服务二</a></li>
  106. <li><ahref="#">服务二服务二</a></li>
  107. <li><ahref="#">服务二服务二服务二</a></li>
  108. <li><ahref="#">服务二</a></li>
  109. </ul>
  110. </li>
  111. <li><ahref="#">成功案例</a>
  112. <ul>
  113. <li><ahref="#">案例三</a></li>
  114. <li><ahref="#">案例</a></li>
  115. <li><ahref="#">案例三案例三</a></li>
  116. <li><ahref="#">案例三案例三案例三</a></li>
  117. </ul>
  118. </li>
  119. <li><ahref="#">关于我们</a>
  120. <ul>
  121. <li><ahref="#">我们四</a></li>
  122. <li><ahref="#">我们四</a></li>
  123. <li><ahref="#">我们四</a></li>
  124. <li><ahref="#">我们四111</a></li>
  125. </ul>
  126. </li>
  127. <li><ahref="#">在线演示</a>
  128. <ul>
  129. <li><ahref="#">演示</a></li>
  130. <li><ahref="#">演示</a></li>
  131. <li><ahref="#">演示</a></li>
  132. <li><ahref="#">演示演示演示</a></li>
  133. <li><ahref="#">演示演示演示</a></li>
  134. <li><ahref="#">演示演示</a></li>
  135. <li><ahref="#">演示演示演示</a></li>
  136. <li><ahref="#">演示演示演示演示演示</a></li>
  137. </ul>
  138. </li>
  139. <li><ahref="#">联系我们</a>
  140. <ul>
  141. <li><ahref="#">联系联系联系联系联系</a></li>
  142. <li><ahref="#">联系联系联系</a></li>
  143. <li><ahref="#">联系</a></li>
  144. <li><ahref="#">联系联系</a></li>
  145. <li><ahref="#">联系联系</a></li>
  146. <li><ahref="#">联系联系联系</a></li>
  147. <li><ahref="#">联系联系联系</a></li>
  148. </ul>
  149. </li>
  150. </ul>
  151. </body>
  152. </html>


CSS水平下拉菜单
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>CSSMenu-Horizontal</title>
  6. <styletype="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:bold16pxArial,Helvetica,sans-serif;
  18. }
  19. p{
  20. font:11pxArial,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. /*CSSCodeforMenuBegin:*/
  31. /*Root=Horizontal,Secondary=Vertical*/
  32. ul#navmenu{
  33. margin:0;
  34. border:0none;
  35. padding:0;
  36. width:500px;/*ForKHTML*/
  37. list-style:none;
  38. height:24px;
  39. }
  40. ul#navmenuli{
  41. margin:0;
  42. border:0none;
  43. padding:0;
  44. float:left;/*ForGecko*/
  45. display:inline;
  46. list-style:none;
  47. position:relative;
  48. height:24px;
  49. }
  50. ul#navmenuul{
  51. margin:0;
  52. border:0none;
  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#navmenuulli{
  62. float:none;/*ForGecko*/
  63. display:block!important;
  64. display:inline;/*ForIE*/
  65. }
  66. /*RootMenu*/
  67. ul#navmenua{
  68. border:1pxsolid#FFF;
  69. border-right-color:#CCC;
  70. border-bottom-color:#CCC;
  71. padding:06px;
  72. float:none!important;/*ForOpera*/
  73. float:left;/*ForIE*/
  74. display:block;
  75. background:#EEE;
  76. color:#666;
  77. font:bold10px/22pxVerdana,Arial,Helvetica,sans-serif;
  78. text-decoration:none;
  79. height:auto!important;
  80. height:1%;/*ForIE*/
  81. }
  82. /*RootMenuHoverPersistence*/
  83. ul#navmenua:hover,
  84. ul#navmenuli:hovera,
  85. ul#navmenuli.iehovera{
  86. background:#CCC;
  87. color:#FFF;
  88. }
  89. /*2ndMenu*/
  90. ul#navmenuli:hoverlia,
  91. ul#navmenuli.iehoverlia{
  92. float:none;
  93. background:#EEE;
  94. color:#666;
  95. }
  96. /*2ndMenuHoverPersistence*/
  97. ul#navmenuli:hoverlia:hover,
  98. ul#navmenuli:hoverli:hovera,
  99. ul#navmenuli.iehoverlia:hover,
  100. ul#navmenuli.iehoverli.iehovera{
  101. background:#CCC;
  102. color:#FFF;
  103. }
  104. /*3rdMenu*/
  105. ul#navmenuli:hoverli:hoverlia,
  106. ul#navmenuli.iehoverli.iehoverlia{
  107. background:#EEE;
  108. color:#666;
  109. }
  110. /*3rdMenuHoverPersistence*/
  111. ul#navmenuli:hoverli:hoverlia:hover,
  112. ul#navmenuli:hoverli:hoverli:hovera,
  113. ul#navmenuli.iehoverli.iehoverlia:hover,
  114. ul#navmenuli.iehoverli.iehoverli.iehovera{
  115. background:#CCC;
  116. color:#FFF;
  117. }
  118. /*4thMenu*/
  119. ul#navmenuli:hoverli:hoverli:hoverlia,
  120. ul#navmenuli.iehoverli.iehoverli.iehoverlia{
  121. background:#EEE;
  122. color:#666;
  123. }
  124. /*4thMenuHover*/
  125. ul#navmenuli:hoverli:hoverli:hoverlia:hover,
  126. ul#navmenuli.iehoverli.iehoverli.iehoverlia:hover{
  127. background:#CCC;
  128. color:#FFF;
  129. }
  130. ul#navmenuulul,
  131. ul#navmenuululul{
  132. display:none;
  133. position:absolute;
  134. top:0;
  135. left:160px;
  136. }
  137. /*DoNotMove-MustComeBeforedisplay:blockforGecko*/
  138. ul#navmenuli:hoverulul,
  139. ul#navmenuli:hoverululul,
  140. ul#navmenuli.iehoverulul,
  141. ul#navmenuli.iehoverululul{
  142. display:none;
  143. }
  144. ul#navmenuli:hoverul,
  145. ul#navmenuulli:hoverul,
  146. ul#navmenuululli:hoverul,
  147. ul#navmenuli.iehoverul,
  148. ul#navmenuulli.iehoverul,
  149. ul#navmenuululli.iehoverul{
  150. display:block;
  151. }
  152. </style>
  153. <scripttype="text/JavaScript">
  154. navHover=function(){
  155. varlis=document.getElementById("navmenu").getElementsByTagName("LI");
  156. for(vari=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(newRegExp("iehover\\b"),"");
  162. }
  163. }
  164. }
  165. if(window.attachEvent)window.attachEvent("onload",navHover);
  166. </script>
  167. </head>
  168. <body>
  169. <h1>CSSMenu-Horizontal</h1>
  170. <hr/>
  171. <ulid="navmenu">
  172. <li><ahref="#">Blog</a></li>
  173. <li><ahref="#">Work+</a>
  174. <ul>
  175. <li><ahref="#">Websites+</a>
  176. <ul>
  177. <li><ahref="#">qrayg</a></li>
  178. <li><ahref="#">qArcade</a></li>
  179. <li><ahref="#">qLoM</a></li>
  180. <li><ahref="#">qDT</a></li>
  181. </ul>
  182. </li>
  183. <li><ahref="#">PenandInk</a></li>
  184. <li><ahref="#">FreeInterfaces</a></li>
  185. </ul>
  186. </li>
  187. <li><ahref="#">Learn+</a>
  188. <ul>
  189. <li><ahref="#"><ahref="http://www.jb51.net/list/list_10_1.htm"target="_blank"><fontcolor=red>Fireworks</font></a>+</a>
  190. <ul>
  191. <li><ahref="#">aquaButton</a></li>
  192. <li><ahref="#">aquaButton2</a></li>
  193. <li><ahref="#">waterDrop</a></li>
  194. <li><ahref="#">lightFX</a></li>
  195. <li><ahref="#">lightFX2</a></li>
  196. </ul>
  197. </li>
  198. <li><ahref="#">CSS+</a>
  199. <ul>
  200. <li><ahref="#">footerStick</a></li>
  201. <li><ahref="#">spriteNav</a></li>
  202. <li><ahref="#">@import</a></li>
  203. </ul>
  204. </li>
  205. </ul>
  206. </li>
  207. <li><ahref="#">Info</a></li>
  208. <li><ahref="#">Contact</a></li>
  209. </ul>
  210. </body>
  211. </html>


CSS垂直下拉菜单
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>CSSMenu-Vertical</title>
  6. <styletype="text/css">
  7. body{
  8. margin:0;
  9. padding:30px;
  10. background:#FFF;
  11. color:#666;
  12. }
  13. h1{
  14. font:bold16pxArial,Helvetica,sans-serif;
  15. }
  16. p{
  17. font:11pxArial,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. /*CSSCodeforMenuBegin:*/
  28. /*Root=Vertical,Secondary=Vertical*/
  29. ul#navmenu,
  30. ul#navmenuli,
  31. ul#navmenuul{
  32. margin:0;
  33. border:0none;
  34. padding:0;
  35. width:160px;/*ForKHTML*/
  36. list-style:none;
  37. }
  38. ul#navmenuli{
  39. display:block!important;/*ForGOODbrowsers*/
  40. display:inline;/*ForIE*/
  41. position:relative;
  42. }
  43. /*RootMenu*/
  44. ul#navmenua{
  45. border:1pxsolid#FFF;
  46. border-right-color:#CCC;
  47. border-bottom-color:#CCC;
  48. padding:06px;
  49. display:block;
  50. background:#EEE;
  51. color:#666;
  52. font:bold10px/22pxVerdana,Arial,Helvetica,sans-serif;
  53. text-decoration:none;
  54. height:auto!important;
  55. height:1%;/*ForIE*/
  56. }
  57. /*RootMenuHoverPersistence*/
  58. ul#navmenua:hover,
  59. ul#navmenuli:hovera,
  60. ul#navmenuli.iehovera{
  61. background:#CCC;
  62. color:#FFF;
  63. }
  64. /*2ndMenu*/
  65. ul#navmenuli:hoverlia,
  66. ul#navmenuli.iehoverlia{
  67. background:#EEE;
  68. color:#666;
  69. }
  70. /*2ndMenuHoverPersistence*/
  71. ul#navmenuli:hoverlia:hover,
  72. ul#navmenuli:hoverli:hovera,
  73. ul#navmenuli.iehoverlia:hover,
  74. ul#navmenuli.iehoverli.iehovera{
  75. background:#CCC;
  76. color:#FFF;
  77. }
  78. /*3rdMenu*/
  79. ul#navmenuli:hoverli:hoverlia,
  80. ul#navmenuli.iehoverli.iehoverlia{
  81. background:#EEE;
  82. color:#666;
  83. }
  84. /*3rdMenuHoverPersistence*/
  85. ul#navmenuli:hoverli:hoverlia:hover,
  86. ul#navmenuli:hoverli:hoverli:hovera,
  87. ul#navmenuli.iehoverli.iehoverlia:hover,
  88. ul#navmenuli.iehoverli.iehoverli.iehovera{
  89. background:#CCC;
  90. color:#FFF;
  91. }
  92. /*4thMenu*/
  93. ul#navmenuli:hoverli:hoverli:hoverlia,
  94. ul#navmenuli.iehoverli.iehoverli.iehoverlia{
  95. background:#EEE;
  96. color:#666;
  97. }
  98. /*4thMenuHover*/
  99. ul#navmenuli:hoverli:hoverli:hoverlia:hover,
  100. ul#navmenuli.iehoverli.iehoverli.iehoverlia:hover{
  101. background:#CCC;
  102. color:#FFF;
  103. }
  104. ul#navmenuul,
  105. ul#navmenuulul,
  106. ul#navmenuululul{
  107. display:none;
  108. position:absolute;
  109. top:0;
  110. left:160px;
  111. }
  112. /*DoNotMove-MustComeBeforedisplay:blockforGecko*/
  113. ul#navmenuli:hoverulul,
  114. ul#navmenuli:hoverululul,
  115. ul#navmenuli.iehoverulul,
  116. ul#navmenuli.iehoverululul{
  117. display:none;
  118. }
  119. ul#navmenuli:hoverul,
  120. ul#navmenuulli:hoverul,
  121. ul#navmenuululli:hoverul,
  122. ul#navmenuli.iehoverul,
  123. ul#navmenuulli.iehoverul,
  124. ul#navmenuululli.iehoverul{
  125. display:block;
  126. }
  127. </style>
  128. <scripttype="text/javascript">
  129. <!--
  130. navHover=function(){
  131. varlis=document.getElementById("navmenu").getElementsByTagName("LI");
  132. for(vari=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(newRegExp("iehover\\b"),"");
  138. }
  139. }
  140. }
  141. if(window.attachEvent)window.attachEvent("onload",navHover);
  142. -->
  143. </script>
  144. </head>
  145. <body>
  146. <h1>CSSMenu-Vertical</h1>
  147. <hr/>
  148. <ulid="navmenu">
  149. <li><ahref="#">Blog</a></li>
  150. <li><ahref="#">Work+</a>
  151. <ul>
  152. <li><ahref="#">Websites+</a>
  153. <ul>
  154. <li><ahref="#">qrayg</a></li>
  155. <li><ahref="#">qArcade</a></li>
  156. <li><ahref="#">qLoM</a></li>
  157. <li><ahref="#">qDT</a></li>
  158. </ul>
  159. </li>
  160. <li><ahref="#">PenandInk</a></li>
  161. <li><ahref="#">FreeInterfaces</a></li>
  162. </ul>
  163. </li>
  164. <li><ahref="#">Learn+</a>
  165. <ul>
  166. <li><ahref="#"><ahref="http://www.jb51.net/list/list_10_1.htm"target="_blank"><fontcolor=red>Fireworks</font></a>+</a>
  167. <ul>
  168. <li><ahref="#">aquaButton</a></li>
  169. <li><ahref="#">aquaButton2</a></li>
  170. <li><ahref="#">waterDrop</a></li>
  171. <li><ahref="#">lightFX</a></li>
  172. <li><ahref="#">lightFX2</a></li>
  173. </ul>
  174. </li>
  175. <li><ahref="#">CSS+</a>
  176. <ul>
  177. <li><ahref="#">footerStick</a></li>
  178. <li><ahref="#">spriteNav</a></li>
  179. <li><ahref="#">@import</a></li>
  180. </ul>
  181. </li>
  182. </ul>
  183. </li>
  184. <li><ahref="#">Info</a></li>
  185. <li><ahref="#">Contact</a></li>
  186. </ul>
  187. </body>
  188. </html>


CSS实现的中英文双语导航菜单
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <metaname="Keywords"content="bilingualmenu,中英文双语菜单"/>
  6. <metahttp-equiv="Description"content="完全用CSS实现的中英文双语导航菜单"/>
  7. <metacontent="all"name="robots"/>
  8. <metaname="author"content="forestgan"/>
  9. <metaname="copyright"content="http://www.forest53.com"/>
  10. <title>完全用CSS实现的中英文双语导航菜单</title>
  11. <styletype="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:10px10px0;
  22. font-size:12px;
  23. font-weight:bold;
  24. margin:1em00;
  25. list-style:none;
  26. }
  27. #navli{
  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:hoverspan{
  39. visibility:visible;
  40. top:0;
  41. left:0;
  42. cursor:pointer;
  43. }
  44. .bispan{
  45. position:absolute;
  46. left:-999em;
  47. visibility:hidden;
  48. }
  49. #navlia,.bi:hoverspan{
  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. #navlia:hover,.bi:hoverspan{
  59. color:#FFFFFF;
  60. background:#DC4E1B;
  61. }
  62. .bi:hoverspan{
  63. padding-top:2px;
  64. }
  65. #navbar{
  66. background:#DC4E1B;
  67. height:8px;
  68. overflow:hidden;
  69. clear:both;
  70. }
  71. </style>
  72. <linkhref="../css/main.css"rel="stylesheet"type="text/css"/>
  73. </head>
  74. <body>
  75. <divid="top">
  76. <ulid="nav">
  77. <li><aclass="bi"href="Http://www.junstudio.org/">Home<span>首　页</span></a></li>
  78. <li><aclass="bi"href="Http://www.junstudio.org/blog">Blog<span>日志</span></a></li>
  79. <li><aclass="bi"href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li>
  80. <li><aclass="bi"href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li>
  81. <li><aclass="bi"href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li>
  82. </ul>
  83. <divid="navbar"></div>
  84. </body>
  85. </html>
iteye_19603
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值