Advanced Search

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

/ Published in: CSS
Save to your folder(s)
シンプルなドロップダウンメニュー。入れ子方式。 by http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Expand | Embed | Plain Text

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.