Un aute style de menu.

Il faut mettre un ul dans le li et le styliser

<li>...</li>
<li>
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</li>

Ensuite en css

li ul{
    display: none;
}
li:hover ul{
    display: block;
}

Je ne suis pas sûr que c'est display block mais voilà, suite à toi de styliser comme tu veux.

C'est exactement ça enfin si c'est bien des sous-menu que tu comptes faire par contre si tu comptes assurer la compatibilité avec internet explorer 7 va falloir changer de méthode.
Voilà comment j'ai fait moi:

/*Sous-menu*/
            #main li>ul
            {position:absolute;
            top:35px;
            left:30px;
            background:url(../webroot/img/btn/rub_slide.png);}

            #main li:hover > ul
            {display: block;
            margin-top:22px;
            width:60px;
            height:151px;}
            #main ul
            {list-style: none;
            display:none;
            position:absolute;
            top:35px;
            left:0;
            z-index:9;}
            #main ul li
            {float:none;
            margin:0;
            padding:0;
            display:block;}

            #main ul a
            {margin-top:20px;
            position:relative;
            right:20px;
            height:auto;
            line-height:10px;
            display:block;
            float:none;}

Je te laisse adapter à ta façon ^^ .