纯div+css制作的弹出菜单特效代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>二级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>
纯div+css制作的弹出菜单特效代码