El tema es el siguiente:
Tengo un menu con solapas desplegables en vertical, de forma que algunos items se me hacen muy largos. Queria pasar a que se despliguen horizontalmente, como seria eso?
Les dejo el codigo de mi menu.
Código HTML:
<ul> <li><a href="#">FINCAS Y LOTES</a> <ul> <li><a href="fincas.html">CAÑADA SECA</a></li> <li><a href="#">RAMA CAÍDA</a></li> <li><a href="#">LA LLAVE</a></li> <li><a href="#">MONTE COMÁN</a></li> <li><a href="#">COLONIA ELENA</a></li> <li><a href="#">CUADRO NACIONAL</a></li> <li><a href="#">CUADRO BENEGAS</a></li> <li><a href="#">VILLA ATUEL</a></li> <li><a href="#">VILLA 25 DE MAYO</a></li> <li><a href="#">ATUEL NORTE</a></li> <li><a href="#">JAIME PRATS</a></li> </ul><!-- end menu inner --> </li><!-- end menu LI --> </ul><!-- end menu UL -->
Código:
#navMenu ul { margin:0; padding:0; line-height:30px; } #navMenu li { margin:0; padding:0; list-style:none; float:left; position:relative; background:#333; } #navMenu ul li a { text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:165px; display:block; color:#FFF; border:1px solid #FFF; font-size:13px; } #navMenu ul ul { position:absolute; visibility:hidden; top:32px; } #navMenu ul li:hover ul { visibility:visible; } #navMenu li:hover { background:#09f; } #navMenu ul li:hover ul li a:hover { background:#CCC; color:#000; } #navMenu a:hover { color:#000; }