Hace un tiempo hice un menú desplegable vertical en html, (<ul> y <li>), y con CSS.
Y recientemente me han informado que el menú llegado ha cierta parte se salta y no pueden llegar a otros menús.
El código del menú es el siguiente:
Código:
<center>
<ul class="menu">
<li>Menú Del FORO
<ul>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
</li>
<li>SXXXX
<ul>
<li><a href="">SXXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">RXXXXs</a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="#">XXXX</A>
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXXS</a></li>
</ul>
</li>
<li><a href="#">XXXX</a>
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
</li>
</ul>
</li>
<li>XXXX
<ul>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXXuda</a></li>
<li><a href="">AXXXXón</a></li>
</ul>
</li>
<li>BXXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
</ul>
</li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">PXXXXXXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li><a href="">XXXX</a></li>
<li> </li>
</ul>
</li>
<li><a href="">XXXX<a></li>
<li><a href="">XXXX<a></li>
<li>XXXX
<ul>
<li>XXXX
<ul>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
</ul>
</li>
<li>XXXX
<ul>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
<li><a href="">XXXX </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul></center>
El código de la hoja de estilos es el siguiente:
Código:
ul.menu
{
background-image: url('http ... fondomenu.png');
background-position: center top;
line-height: 22px;
background-repeat: repeat-y;
list-style:none;
}
ul.menu ul
{
overflow-y: hide;
border-style: solid;
border-width: 0px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}
Estuve viendo si existía alguna restricción para el número de <ul> o <li> Anidados, no los encontré. Luego probé con partir el menú en dos, el resultado era el mismo.
Existe alguna manera de dejar alguna especie de pausa, o que el hover, demore un par de segundos antes de cerrar el menú?.
De Antemano muchas gracias.
