Posted By

fjm on 07/11/07

Tagged

Versions (?)

Last Edited at 07/11/07 11:11pm

Statistics

Viewed 827 times

Favorited by 1 user(s)

Related snippets

[CSS] ãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼

/ Published in: CSS

ã‚·ãƒ³ãƒ—ãƒ«ãªãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã€‚å…¥ã‚Œåæ–¹å¼ã€‚ by http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Highlighted TextExpand

<!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" />

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>

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

Report this snippet Tweet