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

Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.

Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.

Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.

Veja o menu funcionando e vamos aos detalhes:

XHTML

É o documento de marcação onde vamos criar os nós do menu.

Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.

<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li class="submenu"><a href="#" class="bullet">Portfólio</a>
		<ul>
			<li><a href="sites.html">Sites</a></li>
			<li class="submenu"><a href="#" class="bullet">Interfaces</a>
				<ul>
					<li><a href="graficas.html">Gráficas</a></li>
					<li><a href="digitais.html">Digitais</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="quemsomos.html">Quem Somos</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>

CSS

É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.

Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.

#nav, #nav ul {
	width: 70em;
	list-style: none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
 }
#nav li {
	float: left;
 }
#nav a {
	display: block;
	width: 10em;
	height: 2em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
	background-color: #69c; /* IE precisa desta declaração */
	color: #fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px
 }
#nav a:hover {
	text-decoration: none;
	background: #c7daec;
	color:#69c;
 }
#nav a.bullet {
	background:#69c url(bullet.gif) no-repeat right;
 }
#nav a.bullet:hover {
	background: #c7daec url(bullet-over.gif) no-repeat right;
 }
#nav li ul {
	position: absolute;
	left: -1000em;
	width: 10em;
	margin: 0;
 }
#nav ul ul {
	margin: -2.1em 0 0 10.1em;
 }
#nav li:hover ul ul, #nav li.over ul ul {
	left: -1000em;
 }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
	left: auto;
}

JavaScript

O arquivo JavaScript é responsável pela ação.

É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.

<script type="text/javascript">

var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;

function dropdown_init()
{
 try
 {
  var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');

  for (var a = 0; a < as.length; a++)
  {
   as[a].onfocus = function() { dropdown_expand(this) }
   as[a].onmouseover = function() { dropdown_expand(this) }
   as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
   as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
  }

  dropdown_colapse(0);

 } catch(e){}

}

function dropdown_expand(caller)
{
 try
 {
  clearInterval(dropdown_intervalId);

  var uls = caller.parentNode.parentNode.getElementsByTagName('ul');

  for (var ul = 0; ul < uls.length; ul++)
   uls[ul].style.left = "-1000em";

  caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";

 } catch(e){}

}

function dropdown_colapse(milliseconds)
{
 try
 {
  clearInterval(dropdown_intervalId);

  dropdown_intervalId = setInterval(function()
  {
   var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');

   for (var ul = 0; ul < uls.length; ul++)
    uls[ul].style.left = "-1000em";

   clearInterval(dropdown_intervalId);

  }, milliseconds, null);

 } catch(e){}

}

window.onload = dropdown_init;
</script>

Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.

A melhoria progressiva é uma estratégia de web design que enfatiza a acessibilidade, a marcação semântica e estilo externo e tecnologias de script.

Ela usa tecnologias da web em camadas que permite a todos o acesso a conteúdos e funcionalidades básicas de uma página web usando qualquer navegador ou ligação à Internet, fornecendo também aqueles com software de navegação mais largura de banda ou mais avançado de uma versão melhorada da página.

A estratégia é uma tentativa de subverter a estratégia de web design tradicional conhecida como degradação graciosa, onde designers iriam criar páginas Web para os navegadores mais recentes que também funcionam bem em versões antigas do navegador.

Degradação graciosa deveria permitir que a página de degradar ou manter-se apresentável, mesmo que certas tecnologias assumida pelo projeto não estava presente, sem ser brusco para o usuário do software, como mais velhos.

Na prática, a degradação graciosa foi suplantada por uma atitude que o usuário final deve apenas atualizar. Esta atitude é devido a limitações de tempo e orçamento, o acesso limitado a testes de software e browsers alternativos, bem como a crença generalizada de que os navegadores são gratuitos.

No Progressive Enhancement (PE), a estratégia é deliberadamente invertida: um documento de marcação de base é criada, voltada para o menor denominador comum de funcionalidades de software de navegação e, em seguida, o designer adiciona funcionalidades ou melhorias para a apresentação e comportamento da página, utilizando tecnologias modernas, como Cascading Style Sheets ou JavaScript (ou outras tecnologias avançadas, como Flash ou Java applets ou SVG, etc ) Todas essas melhorias são ligados externamente, de modo a evitar forçar navegadores de menor capacidade para comer dados que eles não entendem e não pode lidar com, ou que teria pântano sua ligação à Internet.

A abordagem do PE é derivada da experiência precoce Pulido (C 1993-4) com SGML, antes de trabalhar com HTML ou qualquer linguagem de apresentação na Web, bem como das experiências mais trabalhar com CSS para resolver bugs do navegador.

Nesses contextos cedo SGML, marcação semântica foi de fundamental importância, visto que a apresentação foi quase sempre considerada separadamente em vez de ser incorporado na marcação própria. Este conceito pode ser referido nos meios de marcação como a regra da separação de apresentação e conteúdo, a separação entre conteúdo e estilo, ou de separação da semântica e da apresentação.

À medida que a Web evoluiu em meados dos anos noventa, mas antes da CSS foi introduzida e amplamente apoiada, esta regra básica do SGML foi repetidamente violada por extensores HTML.

Profissionais como Eric Costello, Owen Briggs, Dave Shea, entre outros, mostraram como usar o CSS para fins de layout.

Libertando os designers a usar tecnologias poderosas como o CSS para gerir todas as tarefas de apresentação, JavaScript para melhorar comportamento e XHTML para estrutura.

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.