[CSS] ドロップダウンメニュー


/ Published in: CSS
Save to your folder(s)

シンプルなドロップダウンメニュー。入れ子方式。 by http://www.pmob.co.uk/temp/dropdown_horizontal2.htm


Copy this code and paste it in your HTML
  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. <title>Horizontal Drop Down Menus</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <!--[if lt IE 7]>
  7. <script type="text/javascript">
  8. sfHover = function() {
  9. var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  10. for (var i=0; i<sfEls.length; i++) {
  11. sfEls[i].onmouseover=function() {
  12. this.className+=" over";
  13. }
  14. sfEls[i].onmouseout=function() {
  15. this.className=this.className.replace(new RegExp(" over\\b"), "");
  16. }
  17. }
  18. }
  19. if (window.attachEvent) window.attachEvent("onload", sfHover);
  20. </script>
  21. <![endif]-->
  22.  
  23. <style type="text/css">
  24. body {
  25. font: x-small Verdana, Arial, Helvetica, sans-serif;
  26. }
  27. * html body{
  28. font-size:xx-small;
  29. f\ont-size:x-small;
  30. }
  31. ul#nav, ul#nav ul {
  32. margin: 0;
  33. padding: 0;
  34. list-style: none;
  35. }
  36.  
  37. ul#nav li {
  38. position: relative;
  39. float: left;
  40. width:149px;
  41. }
  42.  
  43. #nav li ul {
  44. position: absolute;
  45. margin-left: -999em; /* hide menu from view */
  46. top: auto;
  47. left:0;
  48. }
  49.  
  50. /* Styles for Menu Items */
  51. ul#nav li a {
  52. display: block;
  53. text-decoration: none;
  54. color: #777;
  55. background: #ffffcc; /* IE6 Bug */
  56. padding: 5px;
  57. border: 1px solid #ccc;
  58. margin-bottom:-1px;
  59. min-height:0;
  60. }
  61. /* commented backslash mac hiding hack \*/
  62. * html ul#nav li a {height:1%; position:relative;}
  63. /* end hack */
  64.  
  65. /* this sets all hovered lists to red */
  66. #nav li:hover a,#nav li.over a,
  67. #nav li:hover li a:hover,#nav li.over li a:hover {
  68. color: #fff;
  69. background-color: red;}
  70.  
  71. /* set dropdown to default */
  72. #nav li:hover li a,#nav li.over li a {
  73. color: #777;
  74. background-color: #ffffcc;
  75. }
  76. #nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
  77. #nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/
  78.  
  79. </style>
  80. </head>
  81. <body>
  82. <ul id="nav">
  83. <li><a href="#">Home</a></li>
  84. <li><a href="#">About</a>
  85. <ul>
  86. <li><a href="#">History</a></li>
  87. <li><a href="#">Team</a></li>
  88. <li><a href="#">Offices</a></li>
  89. </ul>
  90. </li>
  91. <li><a href="#">Services</a>
  92. <ul>
  93. <li><a href="#">Web Design</a></li>
  94. <li><a href="#">Internet Marketing</a></li>
  95. <li><a href="#">Hosting</a></li>
  96. <li><a href="#">Domain Names</a></li>
  97. <li><a href="#">Broadband</a></li>
  98. </ul>
  99. </li>
  100. <li><a href="#">Contact Us</a>
  101. <ul>
  102. <li><a href="#">United Kingdom</a></li>
  103. <li><a href="#">France</a></li>
  104. <li><a href="#">USA</a></li>
  105. <li><a href="#">Australia</a></li>
  106. </ul>
  107. </li>
  108. </ul>
  109. </body>
  110. </html>

URL: http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.