advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

fjm on 07/11/07


Tagged

css


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

basicmagic


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

Published in: CSS 

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

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

Plain TextExpand 
  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>

Report this snippet 

You need to login to post a comment.