[SOLUCIONADO] Problema con subelemento menú

[lk2_89]

Buenas tardes amig@s:

vuelvo a haceros una pregunta sobre un menú por el que tuve que preguntar hace un par de semanas. La cosa es que en aquella ocasión, el problema se solucionó, pero ahora vuelvo a tener otro problemilla, a ver si podéis resolvérmelo. Resulta que cuando abro un subelemento de otro subelemento, se solapan entre sí y no se visualiza correctamente; aquí os dejo una imagen para que veáis a que me refiero.



Aquí os dejo los distintos códigos:

---------HTML---------

Código HTML:

<div class="menu">
                                            <ul class="nav">
                                                <li>
                                                    <a href="index.html">Inicio<span class="flecha">▼</span></a>
                                                </li>
                                                <li>
                                                    <a href="colecciones.html">Relojes<span class="flecha">▼</span></a>
                                                    <ul>
                                                        <li><a href="colecciones.html">Colecciones<span class="flecha">▼</span></a>
                                                            <ul>
                                                                <li><a href="colecciones.html">Tapi<span class="flecha">▼</span></a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                              </li>
                                                <li>
                                                    <a href="tiendas.html">Tiendas<span class="flecha">▼</span></a>
                                                    <ul>
                                                        <li><a href="cadiz.html">C&aacute;diz<span class="flecha">▼</span></a></li>
                                                        <li><a href="cordoba.html">C&oacute;rdoba<span class="flecha">▼</span></a></li>
                                                        <li><a href="castellon.html">Castell&oacute;n<span class="flecha">▼</span></a></li>
                                                        <li><a href="malaga.html">M&aacute;laga<span class="flecha">▼</span></a></li>
                                                        <li><a href="salamanca.html">Salamanca<span class="flecha">▼</span></a></li>
                                                        <li><a href="sevilla_capital.html">Sevilla capital<span class="flecha">▼</span></a></li>
                                                        <li><a href="sevilla_provincia.html">Sevilla provincia<span class="flecha">▼</span></a></li>
                                                    </ul>
                                              </li>
                                                <li>
                                                    <a href="contacto.html">Contacto<span class="flecha">▼</span></a>
                                                </li>
                                            </ul>        
         </div>
 

---------CSS del div que lo contiene---------

Código CSS:

.menu {
    padding-top:5px;
    margin:0 auto;
    width:960px;
    height:45px;
    }
 

---------CSS del menu en si---------

Código CSS:

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
text-align:center;
}
 
.nav {
    position: relative;
    z-index: 999;
}
 
.nav > li {
width:240px;
float:left;
}
 
.nav li a {
background:#20a64f;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
}
 
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
 
.nav li a:not(:last-child) .flecha {
display: inline;
}
 
.nav li a:hover {
background:#e61229;
}
 
.nav li {
position:relative;
}
 
.nav li ul {
display:none;
position:absolute;
min-width:240px;
}
 
.nav li:hover > ul {
display:block;
}
 
.nav li ul li ul {
right:-140px;
top:0;
}
 

[pzin]

Pues en principio bastaría que cambiarás:

Código CSS:

.nav li ul li ul {
  right:-140px;
  top:0;
}
 

por:

Código CSS:

.nav li ul li ul {
  right: -100%;
  top: 0;
}
 

[lk2_89]

¡¡Genial!! Aunque me encantaría poder "bajar" un poco ese nuevo cuadro que se abre; es decir, que empezara justo donde acaba el cuadro del apartado "Colecciones", ya que así, queda bastante lioso.

[lk2_89]

¿Alguien sabe como hacerlo? Por más que pruebo cosas en el código, no lo consigo

[pzin]

Pues si para que aparezca justo a la derecha del elemento y a la misma altura haces:

Código CSS:

.nav li ul li ul {
  right: -100%;
  top: 0;
}
 

Entonces para que aparezca por debajo, ¿cómo será?

[lk2_89]

Al final era el único valor que no había tocado, jajaja. Gracias como siempre!