首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 纯CSS菜单（一）

纯CSS菜单（一）

时间：2008-06-19

来源：互联网

下载 (25.12 KB)
2008-6-19 03:56





  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
  7. />
  8. <title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING
  9. VALIDATING MENU</title>
  10. <style type="text/css">
  11. /* common styling */
  12. /* set up the overall width of the menu div, the font and the
  13. margins */
  14. .menu {
  15. font-family: arial, sans-serif;
  16. width:750px;
  17. margin:0;
  18. margin:50px 0;
  19. }
  20. /* remove the bullets and set the margin and padding to zero for
  21. the unordered list */
  22. .menu ul {
  23. padding:0;
  24. margin:0;
  25. list-style-type: none;
  26. }
  27. /* float the list so that the items are in a line and their
  28. position relative so that the drop down list will appear in the
  29. right place underneath each list item */
  30. .menu ul li {
  31. float:left;
  32. position:relative;
  33. }
  34. /* style the links to be 104px wide by 30px high with a top and
  35. right border 1px solid white. Set the background color and the font
  36. size. */
  37. .menu ul li a, .menu ul li a:visited {
  38. display:block;
  39. text-align:center;
  40. text-decoration:none;
  41. width:104px;
  42. height:30px;
  43. color:#000;
  44. border:1px solid #fff;
  45. border-width:1px 1px 0 0;
  46. background:#c9c9a7;
  47. line-height:30px;
  48. font-size:11px;
  49. }
  50. /* make the dropdown ul invisible */
  51. .menu ul li ul {
  52. display: none;
  53. }
  54. /* specific to non IE browsers */
  55. /* set the background and foreground color of the main menu li on
  56. hover */
  57. .menu ul li:hover a {
  58. color:#fff;
  59. background:#b3ab79;
  60. }
  61. /* make the sub menu ul visible and position it beneath the main
  62. menu list item */
  63. .menu ul li:hover ul {
  64. display:block;
  65. position:absolute;
  66. top:31px;
  67. left:0;
  68. width:105px;
  69. }
  70. /* style the background and foreground color of the submenu links
  71. */
  72. .menu ul li:hover ul li a {
  73. display:block;
  74. background:#faeec7;
  75. color:#000;
  76. }
  77. /* style the background and forground colors of the links on hover
  78. */
  79. .menu ul li:hover ul li a:hover {
  80. background:#dfc184;
  81. color:#000;
  82. }
  83. </style>
  84. <!--[if lte IE 6]>
  85. <style type="text/css">
  86. /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see
  87. if IE7 handles li:hover */
  88. /* Get rid of any default table style */
  89. table {
  90. border-collapse:collapse;
  91. margin:0;
  92. padding:0;
  93. }
  94. /* ignore the link used by 'other browsers' */
  95. .menu ul li a.hide, .menu ul li a:visited.hide {
  96. display:none;
  97. }
  98. /* set the background and foreground color of the main menu link on
  99. hover */
  100. .menu ul li a:hover {
  101. color:#fff;
  102. background:#b3ab79;
  103. }
  104. /* make the sub menu ul visible and position it beneath the main
  105. menu list item */
  106. .menu ul li a:hover ul {
  107. display:block;
  108. position:absolute;
  109. top:32px;
  110. left:0;
  111. width:105px;
  112. }
  113. /* style the background and foreground color of the submenu links
  114. */
  115. .menu ul li a:hover ul li a {
  116. background:#faeec7;
  117. color:#000;
  118. }
  119. /* style the background and forground colors of the links on hover
  120. */
  121. .menu ul li a:hover ul li a:hover {
  122. background:#dfc184;
  123. color:#000;
  124. }
  125. </style>
  126. <![endif]-->
  127. </head>
  128. <body>
  129. <div class="menu">
  130. <ul>
  131. <li><a class="hide" href="../menu/index.html">DEMOS</a>
  132. <!--[if lte IE 6]>
  133. <a href="../menu/index.html">DEMOS
  134. <table><tr><td>
  135. <![endif]-->
  136.     <ul>
  137.     <li><a href="../menu/zero_dollars.html" title="The zero dollar
  138. ads page">zero dollars</a></li>
  139.     <li><a href="../menu/embed.html" title="Wrapping text around
  140. images">wrapping text</a></li>
  141.     <li><a href="../menu/form.html" title="Styling forms">styled
  142. form</a></li>
  143.     <li><a href="../menu/nodots.html" title="Removing active/focus
  144. borders">active focus</a></li>
  145.     <li><a href="../menu/shadow_boxing.html" title="Multi-position
  146. drop shadow">shadow boxing</a></li>
  147.     <li><a href="../menu/old_master.html" title="Image Map for
  148. detailed information">image map</a></li>
  149.     <li><a href="../menu/bodies.html" title="fun with background
  150. images">fun backgrounds</a></li>
  151.     <li><a href="../menu/fade_scroll.html" title="fade-out
  152. scrolling">fade scrolling</a></li>
  153.     <li><a href="../menu/em_images.html" title="em size images
  154. compared">em sized images</a></li>
  155.     </ul>
  156. <!--[if lte IE 6]>
  157. </td></tr></table>
  158. </a>
  159. <![endif]-->
  160. </li>
  161. <li><a class="hide" href="index.html">MENUS</a>
  162. <!--[if lte IE 6]>
  163. <a href="index.html">MENUS
  164. <table><tr><td>
  165. <![endif]-->
  166.     <ul>
  167.     <li><a href="spies.html" title="a coded list of spies">spies
  168. menu</a></li>
  169.     <li><a href="vertical.html" title="a horizontal vertical
  170. menu">vertical menu</a></li>
  171.     <li><a href="expand.html" title="an enlarging unordered
  172. list">enlarging list</a></li>
  173.     <li><a href="enlarge.html" title="an unordered list with link
  174. images">link images</a></li>
  175.     <li><a href="cross.html" title="non-rectangular links">non-
  176. rectangular</a></li>
  177.     <li><a href="jigsaw.html" title="jigsaw links">jigsaw
  178. links</a></li>
  179.     <li><a href="circles.html" title="circular links">circular
  180. links</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="../layouts/index.html">LAYOUTS</a>
  188. <!--[if lte IE 6]>
  189. <a href="../layouts/index.html">LAYOUTS
  190. <table><tr><td>
  191. <![endif]-->
  192.     <ul>
  193.     <li><a href="../layouts/bodyfix.html" title="Cross browser
  194. fixed layout">Fixed 1</a></li>
  195.     <li><a href="../layouts/body2.html" title="Cross browser fixed
  196. layout">Fixed 2</a></li>
  197.     <li><a href="../layouts/body4.html" title="Cross browser fixed
  198. layout">Fixed 3</a></li>
  199.     <li><a href="../layouts/body5.html" title="Cross browser fixed
  200. layout">Fixed 4</a></li>
  201.     <li><a href="../layouts/minimum.html" title="A simple minimum
  202. width layout">minimum width</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="../boxes/index.html">BOXES</a>
  210. <!--[if lte IE 6]>
  211. <a href="../boxes/index.html">BOXES
  212. <table><tr><td>
  213. <![endif]-->
  214.     <ul>
  215.     <li><a href="spies.html" title="a coded list of spies">spies
  216. menu</a></li>
  217.     <li><a href="vertical.html" title="a horizontal vertical
  218. menu">vertical menu</a></li>
  219.     <li><a href="expand.html" title="an enlarging unordered
  220. list">enlarging list</a></li>
  221.     <li><a href="enlarge.html" title="an unordered list with link
  222. images">link images</a></li>
  223.     <li><a href="cross.html" title="non-rectangular links">non-
  224. rectangular</a></li>
  225.     <li><a href="jigsaw.html" title="jigsaw links">jigsaw
  226. links</a></li>
  227.     <li><a href="circles.html" title="circular links">circular
  228. links</a></li>
  229.     </ul>
  230. <!--[if lte IE 6]>
  231. </td></tr></table>
  232. </a>
  233. <![endif]-->
  234. </li>
  235. <li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
  236. <!--[if lte IE 6]>
  237. <a href="../mozilla/index.html">MOZILLA
  238. <table><tr><td>
  239. <![endif]-->
  240.     <ul>
  241.     <li><a href="../mozilla/dropdown.html" title="A drop down
  242. menu">drop down menu</a></li>
  243.     <li><a href="../mozilla/cascade.html" title="A cascading
  244. menu">cascading menu</a></li>
  245.     <li><a href="../mozilla/content.html" title="Using
  246. content:">content:</a></li>
  247.     <li><a href="../mozilla/moxbox.html" title=":hover applied to a
  248. div">mozzie box</a></li>
  249.     <li><a href="../mozilla/rainbow.html" title="I can build a
  250. rainbow">rainbow box</a></li>
  251.     <li><a href="../mozilla/snooker.html" title="Snooker
  252. cue">snooker cue</a></li>
  253.     <li><a href="../mozilla/target.html" title="Target
  254. Practise">target practise</a></li>
  255.     <li><a href="../mozilla/splittext.html" title="Two tone
  256. headings">two tone headings</a></li>
  257.     <li><a href="../mozilla/shadow_text.html" title="Shadow
  258. text">shadow text</a></li>
  259.     </ul>
  260. <!--[if lte IE 6]>
  261. </td></tr></table>
  262. </a>
  263. <![endif]-->
  264. </li>
  265. <li><a class="hide" href="../ie/index.html">EXPLORER</a>
  266. <!--[if lte IE 6]>
  267. <a href="../ie/index.html">EXPLORER
  268. <table><tr><td>
  269. <![endif]-->
  270.     <ul>
  271.     <li><a href="../ie/exampleone.html" title="Example one">example
  272. one</a></li>
  273.     <li><a href="../ie/weft.html" title="Weft fonts">weft
  274. fonts</a></li>
  275.     <li><a href="../ie/exampletwo.html" title="Vertical
  276. align">vertical align</a></li>
  277.     </ul>
  278. <!--[if lte IE 6]>
  279. </td></tr></table>
  280. </a>
  281. <![endif]-->
  282. </li>
  283. <li><a class="hide" href="../opacity/index.html">OPACITY</a>
  284. <!--[if lte IE 6]>
  285. <a href="../opacity/index.html">OPACITY
  286. <table><tr><td>
  287. <![endif]-->
  288.     <ul>
  289.     <li><a href="../opacity/colours.html" title="colour
  290. wheel">opaque colours</a></li>
  291.     <li><a href="../opacity/picturemenu.html" title="a menu using
  292. opacity">opaque menu</a></li>
  293.     <li><a href="../opacity/png.html" title="partial
  294. opacity">partial opacity</a></li>
  295.     <li><a href="../opacity/png2.html" title="partial opacity
  296. II">partial opacity II</a></li>
  297.     </ul>
  298. <!--[if lte IE 6]>
  299. </td></tr></table>
  300. </a>
  301. <![endif]-->
  302. </li>
  303. </ul>
  304. <!-- clear the floats if required -->
  305. <div class="clear">&nbsp;</div>
  306. </div>
  307. </body>
  308. </html>
复制代码

作者: 0871   发布时间: 2008-06-19

look

作者: ph911   发布时间: 2008-06-22

强

作者: 风雨人生   发布时间: 2008-06-22

看看

作者: kevin_zhang1983   发布时间: 2008-06-22

真牛！

作者: shenjie117   发布时间: 2008-07-09

谢谢啦~

作者: wanglizhi208   发布时间: 2008-07-09

   谢谢楼主

作者: belial_zm   发布时间: 2008-07-12

谢谢分享

作者: golostyle   发布时间: 2008-07-19

谢谢分享

作者: caihua888   发布时间: 2008-07-19

效果不错，要是做成从数据库读取菜单名称的动态的就更好了，呵呵不知道lz能否搞一个出来

作者: faintok   发布时间: 2008-09-28

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net