Basic dropdown menu using a little javascript

sushil · #1 (**permalink**) 01-09-2009, 02:28 AM

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="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Longer Link 4</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
</ul>

</body>
</html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Does too may links in DropDown menu reduces the PR?	trsiyengar	Google Discussion Forum	4	11-22-2006 07:19 PM
Question on CSS Dropdown Menu	kenaron	Graphics & Design Discussion Forum	5	10-19-2006 03:46 PM
JavaScript dropdown menus on Yahoo! Stores	rosnbex	Yahoo! Discussion Forum	1	08-27-2005 02:38 AM
Database generated dropdown menu	supernatural_247	Web Programming Discussion Forum	3	05-26-2005 09:40 PM
Java script dropdown menu compatibility	Milo	Web Programming Discussion Forum	3	12-19-2004 09:03 PM