Advanced Search

Return to Snippet

Revision: 3343
at July 11, 2007 23:11 by fjm
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->

<style type="text/css">
body {
	font: x-small Verdana, Arial, Helvetica, sans-serif;
}
* html body{
	font-size:xx-small;
 f\ont-size:x-small;
}
ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul#nav  li {
	position: relative;
	float: left;
	width:149px;
}
	
#nav li ul {
	position: absolute;
	margin-left: -999em; /* hide menu from view */
	top: auto;
	left:0;
}

/* Styles for Menu Items */
ul#nav  li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #ffffcc; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
		margin-bottom:-1px;
	min-height:0;
	}
/* commented backslash mac hiding hack \*/ 
* html ul#nav  li a {height:1%;	position:relative;}
/* end hack */ 

/* this sets all hovered lists to red */
#nav li:hover a,#nav  li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
   color: #fff;
   background-color: red;}

/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
   color: #777;
   background-color: #ffffcc;
}
#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/

</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li> 
  <li><a href="#">Services</a> 
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li> 
</ul> 
</body>
</html>
Initial URL 
http://www.pmob.co.uk/temp/dropdown_horizontal2.htm
Initial Description 
シンプルなドロップダウンメニュー。入れ子方式。 by http://www.pmob.co.uk/temp/dropdown_horizontal2.htm
Initial Title 
[CSS] ドロップダウンメニュー
Initial Tags 
css
Initial Language 
CSS