Menú desplegable sólo CSS

[Bravenap]

Muy buenas:

Siguiendo el ejemplo he intentado hacer un menú desplegable (primer nivel en horizontal y segundo desplegable hacia abajo).

Antes utilizaba una tabla en lugar de una lista para el primer nivel y me funcionaba bien, pero no consigo que marche. ¿Qué estoy olvidando u omitiendo?

HTML:

Código:

<div id="cabecera">
<div id="menu">
    <ul>
        <li class="nivel1"><a class="nivel1" href="…">Menú 1</a></li>
        <li class="nivel1"><a class="nivel1" href="…">Menú 2</a>
            <ul>
                <li><a href="…">Opción 2.1</a></li>
			<li><a href="…">Opción 2.2</a></li>
            </ul>
        </li>
        <li class="nivel1"><a class="nivel1" href="…">Menú 3</a>
            <ul>
                <li><a href="…">Opción 3.1</a></li>
                <li><a href="…">Opción 3.2</a></li>
                <li><a href="…">Opción 3.3</a></li>
                <li><a href="…">Opción 3.4</a></li>
                <li><a href="…">Opción 3.5</a></li>
            </ul>
        </li>
        <li class="nivel1"><a href="…" class="nivel1">Menú 4</a></li>
    </ul>
</div>
</div>

CSS:

Código:

/* Menú de navegación */
#cabecera #menu {float: right; clear: both;}
#cabecera #menu ul {margin: 0; padding: 0; list-style-type: none;}
#cabecera #menu ul li.nivel1 {float: left;}
#cabecera #menu ul li a {display: block; position: relative;
    font-weight: bold; font-size: 11px; padding: 0 5px;}
#cabecera #menu ul li:hover {position: relative;}
#cabecera #menu ul li a:hover, #cabecera #menu ul li:hover a.nivel1 {
    position: relative;}
#cabecera #menu ul li a.nivel1 {display: block!important; display: none; 
    position: relative;}
#cabecera #menu ul li ul {display: none;}    
#cabecera #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
    position: absolute; left: 0px;}
#cabecera #menu ul li ul li a:hover {position: relative;}

Gracias y un saludo.