Javascript

Lo situamos en la cabecera y se encarga de mostrar u ocultar los submenús:

<script type="text/javascript"><!--
function mostrarsubmenu(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
    if (document.getElementById('smenu'+i))                                                 {document.getElementById('smenu'+i).style.display='none';}
        }
    if (d) {d.style.display='block';}
    }
//-->
</script>

Código CSS comentado

/*Eliminamos los identificadores de item y ajustamos margen y relleno*/
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

/*Creamos el identificador menu y lo situamos el menú en la zona superior*/
#menu {
position: absolute;
top: 0;
left: 10px;
z-index:100;
width: 100%; /* ajuste para Opera */
}

/*Aplicamos formato a los diversos componentes de las listas que se encuentren dentro de #menu */
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
/*Aplicamos formato a los enlaces que pertenezcan a elementos de listas que se encuentren dentro de #menu */

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a {
text-align:center;
}

/*Aplicamos pseudoclases para formato para enlaces visitados y para el paso de ratón sobre enlace dentro de #menu */
#menu li a:visited, #menu dt a:visited {
color: #eee;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
color: #000;
}

Código HTML

Observa que no tenemos una única lista de definición, sino que cada término de definición y sus datos constituyen una lista dl independiente. Haciéndolo así cada lista flota a la izquierda y permite que la siguiente se coloque a su derecha tal como especificamos al crear las reglas CSS.

<dl>
  <dt onmouseover="javascript:mostrarsubmenu('smenu1');">Menu 1</dt>
  <dd id="smenu1" onblur="javascript:mostrarsubmenu();">
    <ul>
      <li><a href="#">Submen&uacute; 1.1</a></li>
      <li><a href="#">Submen&uacute; 1.2</a></li>
      <li><a href="#">Submen&uacute; 1.3</a></li>
      <li><a href="#">Submen&uacute; 1.4</a></li>
      <li><a href="#">Submen&uacute; 1.5</a></li>
      <li><a href="#">Submen&uacute; 1.6</a></li>
    </ul>
  </dd>
</dl>
<dl>
/* Aunque el siguiente menú no tiene submenús necesitamos invocar el javascript sin darle un valor para que al pasar el ratón sobre él se oculte el menú que estuviera abierto */
  <dt onmouseover="javascript:mostrarsubmenu();">
  <a href="#">Menu 2</a></dt>
</dl>
...