Código fuente Ya.

El objetivo es implementar un menú con submenúes desplegables solo con CSS 
(salvo el IE6 que requiere JavaScript)

Los submenúes los representamos con listas anidadas:
<div id="menu">
<ul>
    <li><a href="#">Tutoriales</a> 
      <ul>
        <li><a href="http://www.htmlya.com.ar">HTML</a></li>
        <li><a href="http://www.cssya.com.ar">CSS</a></li>
        <li><a href="http://www.javascriptya.com.ar">JavaScript</a></li>
        <li><a href="http://www.phpya.com.ar">PHP</a></li>
        <li><a href="http://www.aspya.com.ar">ASP</a></li>
        <li><a href="http://www.dhtmlya.com.ar">DHTML</a></li>
        <li><a href="http://www.ajaxya.com.ar">Ajax</a></li>
        <li><a href="http://www.mysqlya.com.ar">MySQL</a></li>
        <li><a href="http://www.sqlserverya.com.ar">SQL Server</a></li>
      </ul>
    </li>
    <li><a href="#">Opción 2</a> 
      <ul>
        <li><a href="#">Subopción 2-1</a></li>
        <li><a href="#">Subopción 2-2</a></li>
        <li><a href="#">Subopción 2-3</a></li>
        <li><a href="#">Subopción 2-4</a></li>
      </ul>
    </li>

Definimos una serie de estilos generales aplicables a la página:
* {
  margin:0;
  padding:0;
}
body {
  min-width: 680px;
  background: #999; 
  padding:10px;
}
#cabecera {
  background: #eee;
}
#titulo {
  height:70px;
  background:#ccc;
}

Definimos el estilo al menú horizontal aplicando un ancho del 100%:
div#menu {
  background: #036;
  float: left;
  width: 100%;
  font-family:Arial;
  font-size:1.3em;
}

Eliminamos el círculo de los list item del menú horizontal:
div#menu li {
   float:left;       
   position:relative;       
   list-style-type:none;
}

Definimos que los enlaces estén activos para todo su recuadro mediante display con el valor block:
div#menu a {
  display:block;        
  text-decoration:none;        
  color:#069;     
  padding: 4px 18px;      
  background: #036;
  color: #fff;
}

Definimos un color distinto para cuando pasa la flecha del mouse sobre el hipervínculo, tanto para la
letra como el fondo:
div#menu a:hover {
  color: #000;
  background: #69C;
}
   
Definimos posición absoluta para los submenúes (con esto hacemos que aparezca sobre el contenido actual
de la página):   
div#menu ul li ul {
   position:absolute;       
   width:13em;
}

Creamos una línea en la parte inferior de la opción para separación:
div#menu ul li ul li {
   width:100%;        
   border-bottom:1px solid #069;
}

Inicialmente no se muestra ninguna opción:
body div#menu ul li ul {
  display:none;
}

Mostramos el menú horizontal y el submenú que corresponde cuando se pasa la flecha del mouse
sobre la opción:
div#menu ul li:hover ul, div#menu ul li ul:hover {
  display:block;
}