08/11/2010 Development / css

Fiz essa classe genérica, que serve tanto para menu na horizontal quanto vertical. Espero que sirva!

.dropdown                 {clear: left;}
.dropdown > ul            {padding: 7px 0;overflow: hidden;z-index: 100;}
.dropdown ul li           {display: inline;float: left;white-space: nowrap;}
.dropdown ul li a         {display: block;float: left;padding: 3px 5px;font-size: 8.5pt;color: blue;margin-right: 2px;height: 14px;text-decoration: none;}
.dropdown ul li ul        {display: none;z-index: 101;position:absolute;min-width: 120px;background: #fff;border: 1px solid #CCC;margin-top: 20px;padding: 2px;}
.dropdown ul li ul li     {display: block;float: none;}
.dropdown ul li ul li a   {float: none;margin: 0;padding: 5px;#width: 120px;height: auto;}
.dropdown ul li ul li ul  {margin: -27px 0 0 121px;}

<DIV class=dropdown><BR>
<UL><BR>
<LI><A href="#">ATENDIMENTO</A><BR>
<UL><BR>
<LI><A href="#">CADASTRO</A><BR>
<LI><A href="#">GERAR REGISTRO</A><BR>
<LI><A href="#">GERAR CARTÃO</A><BR>
<LI><A href="#">ENCAMINHAMENTOS</A><BR>
<LI><A href="#">ESTATÍSTICA DE CADASTRO</A><BR>
<LI><A href="#">ESTATÍSTICA DE ATENDIMENTO</A><BR></LI></UL><BR><BR>
<LI><A href="#">FATURAMENTO</A><BR>
<UL><BR>
<LI><A href="#">RELATÓRIOS</A><BR>
<LI><A href="#">LISTAGEM DE ATENDIMENTO</A><BR>
<LI><A href="#">PROCEDIMENTOS</A><BR>
<LI><A href="#">ESPECIALIDADES</A><BR>
<LI><A href="#">PROGRAMAS</A><BR>
<LI><A href="#">DIÁRIOS BAMS</A><BR>
<LI><A href="#">ESTATÍSTICA</A><BR></LI></UL><BR><BR></LI></UL><BR></DIV>

 $(document).ready(function(){
  $('.dropdown li').hover(
   function() { $('> ul', this).css('display', 'block'); },
   function() { $('> ul', this).css('display', 'none'); });
 });