Dropdown Menu
Here's an example of a dropdown menu that was generated using the Glimmer Dropdown Wizard, then later styled by manually tweaking the auto-generated CSS.
HTML
<ul id="main_navigation">
<li id="trigger0"><a href="http://visitmix.com">visitmix.com</a>
<ul class="subNavMenuItems" id="subNav0">
<li><a href="http://visitmix.com">visitmix.com</a></li>
<li><a href="http://visitmix.com/about">About</a></li>
<li><a href="http://visitmix.com/labs">Labs</a></li>
<li><a href="http://visitmix.com/articles">Articles</a></li>
<li><a href="http://visitmix.com/opinions">Opinions</a></li>
</ul>
</li>
<li id="trigger1"><a href="http://live.visitmix.com">live.visitmix</a>
<ul class="subNavMenuItems" id="subNav1">
<li><a href="http://live.visitmix.com/About/">About</a></li>
<li><a href="http://live.visitmix.com/Agenda/">Agenda</a></li>
<li><a href="http://live.visitmix.com/Registration/">
Registration</a></li>
<li><a href="http://live.visitmix.com/MIXtify/">Mixtify</a></li>
<li><a href="http://live.visitmix.com/Sponsors/">
Sponsors</a></li>
<li><a href="http://visitmix.com/worldwide/">Worldwide</a></li>
</ul>
</li>
<li id="trigger2"><a href="http://videos.visitmix.com">videos.visitmix</a>
<ul class="subNavMenuItems" id="subNav2">
<li><a href="http://videos.visitmix.com/MIX09">MIX09</a></li>
<li><a href="http://videos.visitmix.com/MIX08">MIX08</a></li>
<li><a href="http://videos.visitmix.com/MIX07">MIX07</a></li>
<li><a href="http://videos.visitmix.com/MIX06">MIX06</a></li>
</ul>
</li>
</ul>
CSS
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}
#main_navigation
{ margin: 0;
padding: 0;
position:absolute;}
#main_navigation li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#main_navigation li a
{ display: block;
background: #ccc;
background-image:url('images/dropdown_bg.jpg');
background-repeat:repeat-x;
padding: 5px 10px 5px 10px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #333;
white-space: nowrap}
#main_navigation li a:hover
{ background: #999;}
#main_navigation li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}
#main_navigation li ul li
{ float: none;
display: inline}
#main_navigation li ul li a
{ width: auto;
background: #fff;}
#main_navigation li ul li a:hover
{ background: #999;}
jQuery
jQuery(function($) {var timer;
function OnMouseHover0(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav0").css("visibility","visible");
}
function OnMouseOut0(event)
{
$("#subNav0").css("visibility","hidden");
}
function OnMouseHover1(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav1").css("visibility","visible");
}
function OnMouseOut1(event)
{
$("#subNav1").css("visibility","hidden");
}
function OnMouseHover2(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav2").css("visibility","visible");
}
function OnMouseOut2(event)
{
$("#subNav2").css("visibility","hidden");
}
$('#trigger0').bind('mouseover', OnMouseHover0);
$('#trigger0').bind('mouseout', OnMouseOut0);
$('#trigger1').bind('mouseover', OnMouseHover1);
$('#trigger1').bind('mouseout', OnMouseOut1);
$('#trigger2').bind('mouseover', OnMouseHover2);
$('#trigger2').bind('mouseout', OnMouseOut2);
});