Простое выпадающее меню

Я привожу только самое необходимое. Дизайн делается самостоятельно. Единственное, что хочу отметить, не ставьте тегам LI маргин и паддинг. Это можно сделать поместив внутрь него еще теги SPAN. Кстати их же можно использовать для определения фона ссылки.

<style>
body {
    font-family:Arial, Helvetica, sans-serif;
}

#menucontainer {
    background:#00FFCC;
}

#menu, #menu ul {
    margin:0;
    padding:0;
    list-style:none;
    background:#CCC;    
}

#menu {
    /*  
        высоту назначить обязательно 
        или после меню добавить див
        с clear:both
    */
    height:30px;
}

#menu li {
    /*  
        выпадение у нас будет
        относительно пункта меню
        position:relative;
        а дочкам надо будет поставить
        position:absolute;
        смотри ниже
    */
    position:relative;
    float:left  
}

#menu li a {
    display:block;
    /*
        флоат - фикс для ие6
    */
    float:left;
    padding:7px 10px;
    height:16px;
    font-size:11px;
    text-transform:uppercase;
    color:#666;
    text-decoration:none
}

#menu li li, #menu li li a {
    float:none;
}

#menu li a:hover {
    color:#FFF;
    background:#999;
}

#menu ul {
    /*  
        выпадение у нас будет
        относительно пункта меню
    */
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    width:auto;
    min-width:100%;
}

*html #menu ul {
    width:210px;
}

#menu li:hover ul, #menu li.hover ul {
    display:block;
}
</style>

<!--[if IE]>

<script type="text/javascript">
sfHover = function() {
    var sfEls1 = document.getElementById("menu").getElementsByTagName("LI");
    for (var i=0; i<sfEls1.length; i++) {
        sfEls1[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls1[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<!--[endif] -->

<div id="menucontainer">
    <ul id="menu">
        <li><a href="#">Первый пункт</a></li>
        <li><a href="#">Второй пункт (Выпадение вниз)</a>
            <ul>
                <li><a href="#">Первый пункт</a></li>
                <li><a href="#">Второй пункт >> </a>
                </li>
                <li><a href="#">Первый пункт</a></li>
                <li><a href="#">Второй пункт</a></li>
            </ul>
        </li>
        <li><a href="#">Третий пункт</a></li>
        <li><a href="#">Четвертый пункт(Выпадение вниз)</a>
            <ul>
                <li><a href="#">Первый пункт</a></li>
                <li><a href="#">Второй пункт</a></li>
                <li><a href="#">Первый пункт</a></li>
                <li><a href="#">Второй пункт</a></li>
            </ul>
        </li>
        <li><a href="#">Пятый пункт</a></li>
    </ul>
</div>