Hi Aaron,
The concept behind a dropdown is pretty simple in and of itself. It just involves nesting a UL in the respective list item that gets the sublist.
[URL=“http://www.css-lab.com/demos/navbar/easy-dropdown.html”]Simple Dropdown Navbar
In your case the html would look like this -
<ul id="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
[B]<li>[/B]<a href="#">Positive Psychology</a>
[B]<ul>[/B]
<li><a href="#">Drop1</a></li>
<li><a href="#">Drop2</a></li>
<li><a href="#">Drop3</a></li>
[B]</ul>[/B]
[B]</li>[/B]
[B]<li>[/B]<a href="#">Services</a>
[B]<ul>[/B]
<li><a href="#">Drop1</a></li>
<li><a href="#">Drop2</a></li>
<li><a href="#">Drop3</a></li>
[B]</ul>[/B]
[B]</li>[/B]
<li><a href="courses.html">Courses & Workshops</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Now things get a little trickier and this is where the CSS comes in to hide and reveal the sub UL on hover. That is done by using li:hover on the parent list items which in turn poses a problem for IE6 since it only supports a:hover. We will get into that later.
As for hiding the sub UL with the CSS that is best done by setting the sub UL as position:absolute then hiding it with a large negative margin. Then it is revelaed by setting margin:0 on the parent li:hover ul
/* ------ Sub UL Drop Down ------ */
#nav-menu ul {
position:absolute;
width:180px;
left:0;
top:100%;
[B]margin-left:-999em;/* hide the sub ul */[/B]
background:#CCC;
text-align:left;
}
#nav-menu ul li,
#nav-menu ul li a {
float:left;
width:172px;
margin:0;
padding:2px 4px;
}
#nav-menu li:hover ul {
[B]margin-left:0;/* reveal the sub ul on li:hover */[/B]
}
You bring it all together and it would look something like the code below. I used display:inline-block on the parent LI but it will cause some problems cross browser. I did something like this once before and FF2 chokes on it, probably not a big concern these days though.
Here is a rough version -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Dropnav</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
color: #000;
}
ul {
margin:0;
padding:0;
list-style: none;
}
ul#nav-menu {
font-family:Arial, Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
text-align: center;
}
#nav-menu li {
margin: 0 6px;
display: inline-block;/*needs X-browser fix*/
position: relative;
}
#nav-menu li a {
float:left;
padding:2px 4px;
}
#nav-menu li:hover { background: #bedced; }
#nav-menu li:hover,
#nav-menu ul { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#nav-menu a:link,
#nav-menu a:visited,
#nav-menu a:active {
text-decoration: none;
color: #000;
padding: 4px;
}
/* ------ Sub UL Drop Down ------ */
#nav-menu ul {
position:absolute;
width:180px;
left:0;
top:100%;
margin-left:-999em;/* hide the sub ul */
background:#CCC;
text-align:left;
}
#nav-menu ul li,
#nav-menu ul li a {
float:left;
width:172px;
margin:0;
padding:2px 4px;
}
#nav-menu li:hover ul {
margin-left:0;/* reveal the sub ul on li:hover */
}
</style>
</head>
<body>
<ul id="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Positive Psychology</a>
<ul>
<li><a href="#">Drop1</a></li>
<li><a href="#">Drop2</a></li>
<li><a href="#">Drop3</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Drop1</a></li>
<li><a href="#">Drop2</a></li>
<li><a href="#">Drop3</a></li>
</ul>
</li>
<li><a href="courses.html">Courses & Workshops</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
