账号通
    

账号  

密码  

11714

查看

35

回复
主题:纯div+css制作的弹出导航菜单 [代码及效果图] [收藏主题] 转到:  
xhdamanda 当前离线

77

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:91 分
登录次数:29 次
注册时间:2012/1/30
最后登录:2012/6/10
xhdamanda 发表于:2012/2/4 3:54:00   | 显示全部帖子 查看该作者主题 楼主 
科汛在线网校系统

本人是新手,内容来源网络,觉得可以请顶上来!!! 高手请指点~!:)





=======================





以下内容只有回复后才可以浏览,请先登录!

点击查看原图

==============================================

[replyview]



  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>三级dropdown弹出菜单</title>
  6. <style type="text/css">
  7. /* common styling */
  8. .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
  9. .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
  10. .menu ul {padding:0; margin:0;list-style-type: none; }
  11. .menu ul li {float:left; margin-right:1px; position:relative;}
  12. .menu ul li ul {display: none;}
  13. /* specific to non IE browsers */
  14. .menu ul li:hover a {color:#fff; background:#36f;}
  15. .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
  16. .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
  17. .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
  18. .menu ul li:hover ul li ul {display: none;}
  19. .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
  20. .menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
  21. .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
  22. .menu ul li:hover ul li:hover ul.left {left:-105px;}
  23. </style>
  24. <!--[if lte IE 6]>
  25. <style type="text/css">
  26. .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
  27. .menu ul li a:hover ul li a.hide {display:none;}
  28. .menu ul li a:hover {color:#fff; background:#36f;}
  29. .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
  30. .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
  31. .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
  32. .menu ul li a:hover ul li a ul {visibility:hidden;}
  33. .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
  34. .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
  35. .menu ul li a:hover ul li a:hover ul.left {left:-105px;}
  36. </style>
  37. <![endif]-->
  38. </head>
  39. <body>
  40. <div class="menu">
  41. <ul>
  42. <li><a class="hide" href="../menu/index.html">DEMOS</a>
  43. <!--[if lte IE 6]>
  44. <a href="../menu/index.html">DEMOS
  45. <table><tr><td>
  46. <![endif]-->
  47. <ul>
  48. <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
  49. <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
  50. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  51. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  52. <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
  53. <!--[if lte IE 6]>
  54. <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
  55. <table><tr><td>
  56. <![endif]-->
  57. <ul>
  58. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  59. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  60. <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
  61. </ul>
  62. <!--[if lte IE 6]>
  63. </td></tr></table>
  64. </a>
  65. <![endif]-->
  66. </li>
  67. <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  68. <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
  69. <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
  70. <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
  71. <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
  72. </ul>
  73. <!--[if lte IE 6]>
  74. </td></tr></table>
  75. </a>
  76. <![endif]-->
  77. </li>
  78. <li><a class="hide" href="index.html">MENUS</a>
  79. <!--[if lte IE 6]>
  80. <a href="index.html">MENUS
  81. <table><tr><td>
  82. <![endif]-->
  83. <ul>
  84. <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  85. <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  86. <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  87. <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  88. <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  89. <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  90. <li><a href="circles.html" title="circular links">circular links</a></li>
  91. </ul>
  92. <!--[if lte IE 6]>
  93. </td></tr></table>
  94. </a>
  95. <![endif]-->
  96. </li>
  97. <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
  98. <!--[if lte IE 6]>
  99. <a href="../layouts/index.html">LAYOUTS
  100. <table><tr><td>
  101. <![endif]-->
  102. <ul>
  103. <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
  104. <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
  105. <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
  106. <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
  107. <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
  108. </ul>
  109. <!--[if lte IE 6]>
  110. </td></tr></table>
  111. </a>
  112. <![endif]-->
  113. </li>
  114. <li><a class="hide" href="../boxes/index.html">BOXES</a>
  115. <!--[if lte IE 6]>
  116. <a href="../boxes/index.html">BOXES
  117. <table><tr><td>
  118. <![endif]-->
  119. <ul>
  120. <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  121. <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  122. <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  123. <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  124. <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  125. <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  126. <li><a href="circles.html" title="circular links">circular links</a></li>
  127. </ul>
  128. <!--[if lte IE 6]>
  129. </td></tr></table>
  130. </a>
  131. <![endif]-->
  132. </li>
  133. <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
  134. <!--[if lte IE 6]>
  135. <a href="../mozilla/index.html">MOZILLA
  136. <table><tr><td>
  137. <![endif]-->
  138. <ul>
  139. <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
  140. <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
  141. <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
  142. <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
  143. <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
  144. <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
  145. <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
  146. <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
  147. <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
  148. </ul>
  149. <!--[if lte IE 6]>
  150. </td></tr></table>
  151. </a>
  152. <![endif]-->
  153. </li>
  154. <li><a class="hide" href="../ie/index.html">EXPLORER</a>
  155. <!--[if lte IE 6]>
  156. <a href="../ie/index.html">EXPLORER
  157. <table><tr><td>
  158. <![endif]-->
  159. <ul>
  160. <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
  161. <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
  162. <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
  163. </ul>
  164. <!--[if lte IE 6]>
  165. </td></tr></table>
  166. </a>
  167. <![endif]-->
  168. </li>
  169. <li><a class="hide" href="../opacity/index.html">OPACITY</a>
  170. <!--[if lte IE 6]>
  171. <a href="../opacity/index.html">OPACITY
  172. <table><tr><td>
  173. <![endif]-->
  174. <ul>
  175. <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
  176. <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
  177. <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
  178. <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
  179. <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>
  180. <!--[if lte IE 6]>
  181. <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK
  182. <table><tr><td>
  183. <![endif]-->
  184. <ul class="left">
  185. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  186. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  187. <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
  188. </ul>
  189. <!--[if lte IE 6]>
  190. </td></tr></table>
  191. </a>
  192. <![endif]-->
  193. </li>
  194. </ul>
  195. <!--[if lte IE 6]>
  196. </td></tr></table>
  197. </a>
  198. <![endif]-->
  199. </li>
  200. </ul>
  201. </div>
  202. </body>
  203. </html>

[/replyview]



点击查看原图





=======================================



[replyview]



  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>flyout-竖向三级弹出菜单</title>
  6. <style type="text/css">
  7. /* common styling */
  8. .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
  9. .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
  10. .menu ul {padding:0; margin:0;list-style-type: none; }
  11. .menu ul li {float:left; margin-right:1px; position:relative;}
  12. .menu ul li ul {display: none;}
  13. /* specific to non IE browsers */
  14. .menu ul li:hover a {color:#fff; background:#36f;}
  15. .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
  16. .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
  17. .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
  18. .menu ul li:hover ul li ul {display: none;}
  19. .menu ul li:hover ul li a {display:block; background:#eee; color:#000;}
  20. .menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
  21. .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
  22. </style>
  23. <!--[if lte IE 6]>
  24. <style type="text/css">
  25. .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
  26. .menu ul li a:hover ul li a.hide {display:none;}
  27. .menu ul li a:hover {color:#fff; background:#36f;}
  28. .menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
  29. .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
  30. .menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
  31. .menu ul li a:hover ul li a ul {visibility:hidden;}
  32. .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
  33. .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
  34. </style>
  35. <![endif]-->
  36. </head>
  37. <body>
  38. <div class="menu">
  39. <ul>
  40. <li><a class="hide" href="../menu/index.html">DEMOS</a>
  41. <!--[if lte IE 6]>
  42. <a href="../menu/index.html">DEMOS
  43. <table><tr><td>
  44. <![endif]-->
  45. <ul>
  46. <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
  47. <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
  48. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  49. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  50. <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
  51. <!--[if lte IE 6]>
  52. <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
  53. <table><tr><td>
  54. <![endif]-->
  55. <ul>
  56. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  57. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  58. <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
  59. </ul>
  60. <!--[if lte IE 6]>
  61. </td></tr></table>
  62. </a>
  63. <![endif]-->
  64. </li>
  65. <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  66. <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
  67. <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
  68. <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
  69. <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
  70. </ul>
  71. <!--[if lte IE 6]>
  72. </td></tr></table>
  73. </a>
  74. <![endif]-->
  75. </li>
  76. <li><a class="hide" href="index.html">MENUS</a>
  77. <!--[if lte IE 6]>
  78. <a href="index.html">MENUS
  79. <table><tr><td>
  80. <![endif]-->
  81. <ul>
  82. <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  83. <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  84. <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  85. <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  86. <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  87. <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  88. <li><a href="circles.html" title="circular links">circular links</a></li>
  89. </ul>
  90. <!--[if lte IE 6]>
  91. </td></tr></table>
  92. </a>
  93. <![endif]-->
  94. </li>
  95. <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
  96. <!--[if lte IE 6]>
  97. <a href="../layouts/index.html">LAYOUTS
  98. <table><tr><td>
  99. <![endif]-->
  100. <ul>
  101. <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
  102. <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
  103. <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
  104. <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
  105. <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
  106. </ul>
  107. <!--[if lte IE 6]>
  108. </td></tr></table>
  109. </a>
  110. <![endif]-->
  111. </li>
  112. <li><a class="hide" href="../boxes/index.html">BOXES</a>
  113. <!--[if lte IE 6]>
  114. <a href="../boxes/index.html">BOXES
  115. <table><tr><td>
  116. <![endif]-->
  117. <ul>
  118. <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  119. <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  120. <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  121. <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  122. <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  123. <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  124. <li><a href="circles.html" title="circular links">circular links</a></li>
  125. </ul>
  126. <!--[if lte IE 6]>
  127. </td></tr></table>
  128. </a>
  129. <![endif]-->
  130. </li>
  131. <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
  132. <!--[if lte IE 6]>
  133. <a href="../mozilla/index.html">MOZILLA
  134. <table><tr><td>
  135. <![endif]-->
  136. <ul>
  137. <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
  138. <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
  139. <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
  140. <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
  141. <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
  142. <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
  143. <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
  144. <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
  145. <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
  146. </ul>
  147. <!--[if lte IE 6]>
  148. </td></tr></table>
  149. </a>
  150. <![endif]-->
  151. </li>
  152. <li><a class="hide" href="../ie/index.html">EXPLORER</a>
  153. <!--[if lte IE 6]>
  154. <a href="../ie/index.html">EXPLORER
  155. <table><tr><td>
  156. <![endif]-->
  157. <ul>
  158. <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
  159. <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
  160. <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
  161. </ul>
  162. <!--[if lte IE 6]>
  163. </td></tr></table>
  164. </a>
  165. <![endif]-->
  166. </li>
  167. <li><a class="hide" href="../opacity/index.html">OPACITY</a>
  168. <!--[if lte IE 6]>
  169. <a href="../opacity/index.html">OPACITY
  170. <table><tr><td>
  171. <![endif]-->
  172. <ul>
  173. <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
  174. <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
  175. <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
  176. <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
  177. </ul>
  178. <!--[if lte IE 6]>
  179. </td></tr></table>
  180. </a>
  181. <![endif]-->
  182. </li>
  183. </ul>
  184. </div>
  185. </body>
  186. </html>

[/replyview]



点击查看原图





==========================================

[replyview]



  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>dropline-水平三级横向弹出菜单</title>
  6. <style type="text/css">
  7. /* common styling */
  8. .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
  9. .menu ul {padding:0; margin:0; list-style-type: none;}
  10. .menu ul li {float:left; border-left:1px solid #eee; width:106px;}
  11. .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
  12. .menu ul li ul {display: none;}
  13. /* specific to non IE browsers */
  14. .menu ul li:hover a {color:#fff; background:#b3ab79;}
  15. .menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
  16. .menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
  17. .menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
  18. .menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
  19. .menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
  20. .menu ul li:hover ul li ul {display: none;}
  21. .menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
  22. .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
  23. .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
  24. .menu ul li:hover ul.right li {float:right;}
  25. .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
  26. .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
  27. .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
  28. </style>
  29. <!--[if lte IE 6]>
  30. <style type="text/css">
  31. table {border-collapse:collapse; margin:0; padding:0;}
  32. .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
  33. .menu ul li a:hover ul li a.hide {display:none;}
  34. .menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}
  35. .menu ul li a:hover {color:#fff; background:#b3ab79;}
  36. .menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
  37. .menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
  38. .menu ul li a:hover ul.left_side li {float:left;}
  39. .menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
  40. .menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
  41. .menu ul li a:hover ul li a ul {visibility:hidden;}
  42. .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
  43. .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
  44. .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
  45. .menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
  46. </style>
  47. <![endif]-->
  48. </head>
  49. <body>
  50. <div class="menu">
  51. <ul>
  52. <li><a class="hide" href="../menu/index.html">DEMOS</a>
  53. <!--[if lte IE 6]>
  54. <a href="../menu/index.html">DEMOS
  55. <table><tr><td>
  56. <![endif]-->
  57. <ul>
  58. <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
  59. <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
  60. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  61. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  62. <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
  63. <!--[if lte IE 6]>
  64. <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  65. <table><tr><td>
  66. <![endif]-->
  67. <ul class="right_side">
  68. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  69. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  70. <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
  71. </ul>
  72. <!--[if lte IE 6]>
  73. </td></tr></table>
  74. </a>
  75. <![endif]-->
  76. </li>
  77. <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  78. <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
  79. </ul>
  80. <!--[if lte IE 6]>
  81. </td></tr></table>
  82. </a>
  83. <![endif]-->
  84. </li>
  85. <li><a class="hide" href="index.html">MENUS</a>
  86. <!--[if lte IE 6]>
  87. <a href="index.html">MENUS
  88. <table><tr><td>
  89. <![endif]-->
  90. <ul>
  91. <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  92. <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  93. <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  94. <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  95. <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  96. <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  97. <li><a href="circles.html" title="circular links">circular links</a></li>
  98. </ul>
  99. <!--[if lte IE 6]>
  100. </td></tr></table>
  101. </a>
  102. <![endif]-->
  103. </li>
  104. <li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
  105. <!--[if lte IE 6]>
  106. <a href="../layouts/index.html">LAYOUTS
  107. <table><tr><td>
  108. <![endif]-->
  109. <ul>
  110. <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
  111. <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
  112. <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
  113. <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
  114. <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
  115. </ul>
  116. <!--[if lte IE 6]>
  117. </td></tr></table>
  118. </a>
  119. <![endif]-->
  120. </li>
  121. <li><a class="hide" href="../boxes/index.html">BOXES</a>
  122. <!--[if lte IE 6]>
  123. <a href="../boxes/index.html">BOXES
  124. <table><tr><td>
  125. <![endif]-->
  126. <ul>
  127. <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  128. <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  129. <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  130. <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  131. <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  132. <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  133. <li><a href="circles.html" title="circular links">circular links</a></li>
  134. </ul>
  135. <!--[if lte IE 6]>
  136. </td></tr></table>
  137. </a>
  138. <![endif]-->
  139. </li>
  140. <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
  141. <!--[if lte IE 6]>
  142. <a href="../mozilla/index.html">MOZILLA
  143. <table><tr><td>
  144. <![endif]-->
  145. <ul>
  146. <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
  147. <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
  148. <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
  149. <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
  150. <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
  151. <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
  152. <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
  153. </ul>
  154. <!--[if lte IE 6]>
  155. </td></tr></table>
  156. </a>
  157. <![endif]-->
  158. </li>
  159. <li><a class="hide" href="../ie/index.html">EXPLORER</a>
  160. <!--[if lte IE 6]>
  161. <a href="../ie/index.html">EXPLORER
  162. <table><tr><td>
  163. <![endif]-->
  164. <ul class="right_side">
  165. <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
  166. <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
  167. <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
  168. </ul>
  169. <!--[if lte IE 6]>
  170. </td></tr></table>
  171. </a>
  172. <![endif]-->
  173. </li>
  174. <li><a class="hide" href="../opacity/index.html">OPACITY</a>
  175. <!--[if lte IE 6]>
  176. <a href="../opacity/index.html">OPACITY
  177. <table><tr><td>
  178. <![endif]-->
  179. <ul class="right_side">
  180. <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
  181. <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
  182. <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
  183. <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
  184. <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
  185. <!--[if lte IE 6]>
  186. <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  187. <table><tr><td>
  188. <![endif]-->
  189. <ul class="left_side">
  190. <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  191. <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  192. <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
  193. </ul>
  194. <!--[if lte IE 6]>
  195. </td></tr></table>
  196. </a>
  197. <![endif]-->
  198. </li>
  199. </ul>
  200. <!--[if lte IE 6]>
  201. </td></tr></table>
  202. </a>
  203. <![endif]-->
  204. </li>
  205. </ul>
  206. </div>
  207. </body>
  208. </html>

[/replyview]



点击查看原图





=======================================







先弄这个4个吧~!~!~!~晚了,该睡觉了!!!!! 下次再发~~~~~~

 
  支持(2) | 反对(2) 回到顶部顶端 回到底部底部
xhdamanda 当前离线

77

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:91 分
登录次数:29 次
注册时间:2012/1/30
最后登录:2012/6/10
xhdamanda 发表于:2012/2/5 21:59:00   | 显示全部帖子 查看该作者主题 沙发 
科汛在线商城系统(NET)

自己顶一个~!~!~!~!~!`

 
  支持(1) | 反对(0) 回到顶部顶端 回到底部底部
xhdamanda 当前离线

77

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:91 分
登录次数:29 次
注册时间:2012/1/30
最后登录:2012/6/10
xhdamanda 发表于:2012/2/8 1:13:00   | 显示全部帖子 查看该作者主题 藤椅 
科汛在线商城系统(NET)
1111111111111111111111111111111111
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
xhdamanda 当前离线

77

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:91 分
登录次数:29 次
注册时间:2012/1/30
最后登录:2012/6/10
xhdamanda 发表于:2012/2/27 0:35:00   | 显示全部帖子 查看该作者主题 板凳 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.54688秒 powered by KesionCMS 9.0