Este menu irá utilizar um método de evento do mouse “hover” e não permite navegação através de teclado, por tantanto ele não é acessível, mas caso seu objetivo seja um menu inclusivo leia um outro post onde eu descrevo um menu drop down acessível.

Primeiro vou criar o documento de marcação para o menu, que no caso será o XHTML.

<div id="menu"><span></span>

   <ul>
      <li><a href="#">Item 1</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 2</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 3</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 4</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 5</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
   </ul>
<span class="right"></span></div>

Agora que os nós do menu estão feitos,  formato ele utilizando CSS.

*{margin:0;padding:0}//um reset básico, pra gente poder controlar melhor a página
//Os códigos CSS a baixo podem variar bastante, depende da sua necessidade e criatividade
#menu{background:url(../Images/bg-menu.jpg) repeat-x; height:37px; width:80%; margin:20px auto}
#menu span{height:37px; width:5px; background:url(../Images/bg-menu-esq.jpg) no-repeat; float:left;}
#menu span.right{background:url(../Images/bg-menu-dir.jpg) no-repeat; float:right;}
#menu ul{position:relative;z-index:2;}
#menu li{float:left; list-style:none; display:inline;}
#menu a{text-decoration:none;display:block; font-size:12px; font-family:Arial;color:#000; padding:10px;}
#menu a:hover{text-decoration:none}
#menu ul li ul{position:absolute;z-index:1;background:#f5f8fd url(../Images/bg-sub-menu.jpg) repeat-x !important;border:1px solid #cfd7ea;border-top:none;
	-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul li ul li{float:none;display:block;padding:0 10px !important; border-top:1px solid #dbe2ec;}
#menu ul li ul li:hover{background:#e2ecf8;color:#26156E;}

Agora vamos ao que interessa, o jQuery

/**
 * @author Felipe
 *Se for usar me avisa e comenta o post 
 */

$(document).ready(function(){

    $("ul li ul").hide();//aqui eu escondo as ul´s que forem filhas de li.
    $("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.
        $(this).find("ul:first").slideDown("slow"); //aqui você faz o que quiser quando o mouse estiver em cima

    }, function(){
        $(this).find("ul:first").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.

O jQuery como você pode ver, é o arquivo mais simples e com poucas linhas de código.

Utilizamos o método hover que recebe dois parâmetros, que é referente a dois estados do mouse, o mouse hover e mouse down.  Em jQuery esse método pode receber duas funções como parâmetros, que é o que fizemos e após eu utilizo o this pra referenciar ao elemento que está sendo acionado e com o find peço pra ele procurar naquele elemento o elemento filho, no caso o primeiro ul que existir e por fim faço o slideDown e Up.
Escolhi esconder o ul filho de li “o sub-menu” com o jQuery, por que se o javaScript estiver desabilitado ou por algum motivo não estiver funcionando, o usuário poderá ver o menu pois ele ficará aberto, se você optar em esconder o menu inicialmente com o CSS o seu menu poderá ficar inutilizável.

Essa foi uma demonstração de um menu simples e bem interessante, porém o jQuery tem plugns incríveis e se você quiser implementar um super menu, você poderá instalar algum plugin, como alguns que vou listar.

• Superfish
• iPod-style Drilldown Menu
• Plugins de menu no site do jQuery

Entre minhas buscas encontrei soluções com javaScript, que não me agradaram muito, mas agora com o CSS3 finalmente encontrei algo que em breve será solução definitiva para este problema.

Não tem mistério é até muito simples.

Vejamos como isso funciona.

border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Leia mais detalhes deste assunto no site CSS3 Info.