建筑蚂蚁»BBS › 设计频道 › 经典源码 › 5款纯div+css制作的弹出菜单
返回列表 发新帖发表新帖
查看: 6206|回复: 5

5款纯div+css制作的弹出菜单

[复制链接]
sam

117

主题

117

主题

117

主题

积分
987
发表于 2006-11-19 09:40:35 | 显示全部楼层 |阅读模式
5款纯div+css制作的弹出菜单(标准且无js)--------来源：http://www.cssplay.co.uk/index.html

一、最基本的：二级dropdown弹出菜单
  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弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU</title>
  6. <style type="text/css">
  7. /* common styling */
  8. /* set up the overall width of the menu div, the font and the margins */
  9. .menu {
  10. font-family: arial, sans-serif;
  11. width:750px;
  12. margin:0;
  13. margin:50px 0;
  14. }
  15. /* remove the bullets and set the margin and padding to zero for the unordered list */
  16. .menu ul {
  17. padding:0;
  18. margin:0;
  19. list-style-type: none;
  20. }
  21. /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
  22. .menu ul li {
  23. float:left;
  24. position:relative;
  25. }
  26. /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
  27. .menu ul li a, .menu ul li a:visited {
  28. display:block;
  29. text-align:center;
  30. text-decoration:none;
  31. width:104px;
  32. height:30px;
  33. color:#000;
  34. border:1px solid #fff;
  35. border-width:1px 1px 0 0;
  36. background:#c9c9a7;
  37. line-height:30px;
  38. font-size:11px;
  39. }
  40. /* make the dropdown ul invisible */
  41. .menu ul li ul {
  42. display: none;
  43. }
  44. /* specific to non IE browsers */
  45. /* set the background and foreground color of the main menu li on hover */
  46. .menu ul li:hover a {
  47. color:#fff;
  48. background:#b3ab79;
  49. }
  50. /* make the sub menu ul visible and position it beneath the main menu list item */
  51. .menu ul li:hover ul {
  52. display:block;
  53. position:absolute;
  54. top:31px;
  55. left:0;
  56. width:105px;
  57. }
  58. /* style the background and foreground color of the submenu links */
  59. .menu ul li:hover ul li a {
  60. display:block;
  61. background:#faeec7;
  62. color:#000;
  63. }
  64. /* style the background and forground colors of the links on hover */
  65. .menu ul li:hover ul li a:hover {
  66. background:#dfc184;
  67. color:#000;
  68. }
  69. </style>
  70. <!--[if lte IE 6]>
  71. <style type="text/css">
  72. /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
  73. /* Get rid of any default table style */
  74. table {
  75. border-collapse:collapse;
  76. margin:0;
  77. padding:0;
  78. }
  79. /* ignore the link used by 'other browsers' */
  80. .menu ul li a.hide, .menu ul li a:visited.hide {
  81. display:none;
  82. }
  83. /* set the background and foreground color of the main menu link on hover */
  84. .menu ul li a:hover {
  85. color:#fff;
  86. background:#b3ab79;
  87. }
  88. /* make the sub menu ul visible and position it beneath the main menu list item */
  89. .menu ul li a:hover ul {
  90. display:block;
  91. position:absolute;
  92. top:32px;
  93. left:0;
  94. width:105px;
  95. }
  96. /* style the background and foreground color of the submenu links */
  97. .menu ul li a:hover ul li a {
  98. background:#faeec7;
  99. color:#000;
  100. }
  101. /* style the background and forground colors of the links on hover */
  102. .menu ul li a:hover ul li a:hover {
  103. background:#dfc184;
  104. color:#000;
  105. }
  106. </style>
  107. <![endif]-->
  108. </head>
  109. <body>
  110. <div class="menu">
  111. <ul>
  112. <li><a class="hide" href="../menu/index.html">DEMOS</a>
  113. <!--[if lte IE 6]>
  114. <a href="../menu/index.html">DEMOS
  115. <table><tr><td>
  116. <![endif]-->
  117.     <ul>
  118.     <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
  119.     <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
  120.     <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
  121.     <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
  122.     <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
  123.     <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
  124.     <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
  125.     <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
  126.     <li><a href="../menu/em_images.html" title="em size images compared">em sized images</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="index.html">MENUS</a>
  134. <!--[if lte IE 6]>
  135. <a href="index.html">MENUS
  136. <table><tr><td>
  137. <![endif]-->
  138.     <ul>
  139.     <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  140.     <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  141.     <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  142.     <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  143.     <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  144.     <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  145.     <li><a href="circles.html" title="circular links">circular links</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="../layouts/index.html">LAYOUTS</a>
  153. <!--[if lte IE 6]>
  154. <a href="../layouts/index.html">LAYOUTS
  155. <table><tr><td>
  156. <![endif]-->
  157.     <ul>
  158.     <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
  159.     <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
  160.     <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
  161.     <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
  162.     <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</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="../boxes/index.html">BOXES</a>
  170. <!--[if lte IE 6]>
  171. <a href="../boxes/index.html">BOXES
  172. <table><tr><td>
  173. <![endif]-->
  174.     <ul>
  175.     <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
  176.     <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
  177.     <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
  178.     <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
  179.     <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
  180.     <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
  181.     <li><a href="circles.html" title="circular links">circular links</a></li>
  182.     </ul>
  183. <!--[if lte IE 6]>
  184. </td></tr></table>
  185. </a>
  186. <![endif]-->
  187. </li>
  188. <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
  189. <!--[if lte IE 6]>
  190. <a href="../mozilla/index.html">MOZILLA
  191. <table><tr><td>
  192. <![endif]-->
  193.     <ul>
  194.     <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
  195.     <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
  196.     <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
  197.     <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
  198.     <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
  199.     <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
  200.     <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
  201.     <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
  202.     <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
  203.     </ul>
  204. <!--[if lte IE 6]>
  205. </td></tr></table>
  206. </a>
  207. <![endif]-->
  208. </li>
  209. <li><a class="hide" href="../ie/index.html">EXPLORER</a>
  210. <!--[if lte IE 6]>
  211. <a href="../ie/index.html">EXPLORER
  212. <table><tr><td>
  213. <![endif]-->
  214.     <ul>
  215.     <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
  216.     <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
  217.     <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
  218.     </ul>
  219. <!--[if lte IE 6]>
  220. </td></tr></table>
  221. </a>
  222. <![endif]-->
  223. </li>
  224. <li><a class="hide" href="../opacity/index.html">OPACITY</a>
  225. <!--[if lte IE 6]>
  226. <a href="../opacity/index.html">OPACITY
  227. <table><tr><td>
  228. <![endif]-->
  229.     <ul>
  230.     <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
  231.     <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
  232.     <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
  233.     <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
  234.     </ul>
  235. <!--[if lte IE 6]>
  236. </td></tr></table>
  237. </a>
  238. <![endif]-->
  239. </li>
  240. </ul>
  241. <!-- clear the floats if required -->
  242. <div class="clear"> </div>
  243. </div>
  244. </body>
  245. </html>
复制代码
css, 菜单, 制作
回复

使用道具 举报

sam

117

主题

117

主题

117

主题

积分
987
 楼主| 发表于 2006-11-19 09:42:14 | 显示全部楼层
二、三级dropdown弹出菜单

  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>
复制代码
回复

使用道具 举报

sam

117

主题

117

主题

117

主题

积分
987
 楼主| 发表于 2006-11-19 09:43:29 | 显示全部楼层
三、flyout-竖向三级弹出菜单

  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>
复制代码
回复

使用道具 举报

sam

117

主题

117

主题

117

主题

积分
987
 楼主| 发表于 2006-11-19 09:44:20 | 显示全部楼层
四、dropline-水平三级横向弹出菜单

  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;}

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

使用道具 举报

sam

117

主题

117

主题

117

主题

积分
987
 楼主| 发表于 2006-11-19 09:45:06 | 显示全部楼层
五、upmenu-水平竖弹向上三级弹出菜单

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

使用道具 举报

wanglioo

0

主题

0

主题

0

主题

积分
7
发表于 2008-2-22 06:16:53 | 显示全部楼层
非专业！完全不明白！
回复

使用道具 举报

返回列表 发新帖发表新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入蚂蚁

本版积分规则

Kernel Development Group

建筑蚂蚁
建筑标签
建筑地图
蚂蚁微博

Copyright © 2019-2023 果核发展 .All rights reserved.

Archiver|手机版| |陕ICP备19013355号  QQ  
Powered by Discuz! X3.5  © 2001-2013 Comsenz Inc.
快速回复 返回顶部 返回列表