This is a technique I've used a couple times to create nice, simple, maintainable code for a site navigation drop-down menu. In this example, the end result looks something like this:

The stylesheet describes our look and feel.. and hides the dropdowns initially:

.mainMenu, .mainMenu ul
{
    list-style: none; 
    margin:0;
    padding:0;
    font-family:Verdana;
}
.menuTitle
{
    color:#336797;
    padding:4px 10px 4px 10px;
}
.menuTitleHover
{
    color:#6d989c;
    padding:4px 10px 4px 10px;
}
.menuItem
{
    float: left;
    margin-right: 10px;
    text-align: center;
    cursor:default;
    padding:0px 5px 0px 5px;        	
}
.menuItem a
{
    text-decoration:none; 
    color:#336797;
}
.menuItem a:hover
{
    text-decoration:none; 
    color:#6d989c;
}
.menuDropDown
{
    position:absolute;
    z-index:5;
    display:none;
    text-align:left;
    width: 145px;
    border:1px solid #CCCCCC;
}
.menuDropDown a
{
    text-decoration:none; 
    color:#cf9953;
}
.menuDropDown a:hover
{
    text-decoration:none; 
    color:#6d989c;
}
.menuDropDown li
{
    padding: 5px;
}

As for the html... We use a ul element to describe our menu:

<ul class="mainMenu">
    <li class="menuItem">
        <div class="menuTitle">About</div>
        <div class="menuDropDown">
            <ul>
                <li><a href="#">link 1</a></li>
                <li><a href="#">link 2</a></li>
                <li><a href="#">link 3</a></li>
            </ul>
        </div>
    </li>
   <li class="menuItem">
        <div class="menuTitle">Products</div>
        <div class="menuDropDown">
            <ul>
                <li><a href="#">link 1</a></li>
                <li><a href="#">link 2</a></li>
                <li><a href="#">link 3</a></li>
            </ul>
        </div>
    </li>
    <li class="menuItem">
        <div class="menuTitle">Contact</div>
        <div class="menuDropDown">
            <ul>
                 <li><a href="#">link 1</a></li>
                <li><a href="#">link 2</a></li>
                <li><a href="#">link 3</a></li>
            </ul>
        </div>
    </li>
</ul>

And the javascript - simple and to the point.. we use jQuery to create the menu hover effect that will pop out the drop-down menus.

$(document).ready(function() {
    $(".menuItem").hover(function() {
        $(this).children(".menuDropDown").stop(true, true);
        $(this).children(".menuTitle").addClass("menuTitleHover");
        $(this).children(".menuDropDown").slideDown(175);
    }, function() {
        $(this).children(".menuDropDown").slideUp(50);
        $(this).children(".menuTitle").removeClass("menuTitleHover");
    });
});

And that's about it.. jQuery significantly reduces the amount of javascript you would typically need to write to create this effect. And it works well across browsers, so we don't have to worry about the details of mouseenter, mouseover, mouseleave and the sometimes subtle differences between browser events.