Ampliación de ancho de menú desplegable en Gatos Perros

sebap04 · 7 Jun 2012

Hola. No se si es el lugar adecuado para postear esto, en todo caso que algún mod lo mueva.

Estoy tratando de modificar un menú desplegable pero no consigo lograrlo. La web en la que realizo la prueba es la siguiente:

Gatos Perros

Como pueden ver hay un menú desplegable que se llama Prueba Principal que contiene a una categoría o sub-menú que tiene 2 lineas y se ve feo. Mi intención es hacerlo más ancho para que salga todo en una sola línea.

Probé modificando esta parte del css:

Insertar CODE, HTML o PHP:

/*Submenu*/
#topmenu ul li ul{ position:absolute; padding:0; z-index:100000; width:128px;margin-left: -50px; display:none;}

poniendo el width más grande pero sólo logre que se vea algo así:

Como ven sale un poco para la izquierda la parte de abajo solamente. No logro que salga todo bien.

Que me falta modificar?

Muchas gracias!!

Brandon Díaz · 7 Jun 2012

Algo complicado de explicar pero a ver
a tu <li id="menu-item-42"> agregale la propiedad position:relative

Despues, a tu
#top ul li ul quitale la propiedad de margin-left Y ve como queda

Si no te convence, agregale a #top ul li ul la propiedad left:5px; Y ve modificandola hasta que quede como tu quieres

sebap04 · 7 Jun 2012

Satanarchist dijo:
Algo complicado de explicar pero a ver
a tu <li id="menu-item-42"> agregale la propiedad position:relative

Despues, a tu
#top ul li ul quitale la propiedad de margin-left Y ve como queda

Si no te convence, agregale a #top ul li ul la propiedad left:5px; Y ve modificandola hasta que quede como tu quieres

No encuentro lo que me decís, en mi css tengo este código para el menú y los submenu:

Insertar CODE, HTML o PHP:

/*MENU*/
[B]Enlace eliminado[/B]}
.menu-header{float:left;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{ float:left; list-style-type:none; padding:0px 20px;}
#topmenu ul li a{ color:#323232; text-decoration:none; font-size:18px; display:block;}
/*Submenu*/
#topmenu ul li ul{ position:absolute; padding:0; z-index:100000; width:128px;margin-left: -50px; display:none;}
#topmenu ul li ul a{font-family:Arial, Helvetica, sans-serif;}
#topmenu .ul_hover{ background:url(images/sub-menu_top.gif) top no-repeat;}
#topmenu ul li ul li { float:none; background:url(images/sub-menu_mid.gif) no-repeat; text-align:center;}
#topmenu ul li ul li:hover{ background:url(images/sub-menu_mid_hover.gif) no-repeat;}
#topmenu ul .submenu_bottom{ width:128px; height:12px; background:url(images/sub-menu_bottom.gif) no-repeat; float:left;}
#topmenu ul li ul li a{ background:none; color:#f2f2f2; text-transform:none; font-weight:normal; font-size:11px;  padding:0px; position:relative;}
#topmenu ul li ul li a span{ background:url(images/buttonbg.png) repeat-x; width:120px; display:block; height:15px; border: 1px solid [B]Enlace eliminado[/B] color:#fff; margin-left:3px; cursor:pointer;}
#topmenu ul li ul li .ul_hover{ margin-top:0; position:relative; padding:0; margin:0;}
#topmenu ul li ul li .ul_hover{ background:none; margin:0; padding:0;}
#topmenu ul li ul li .ul_hover { margin-left:-9px;}
#topmenu ul li ul li .ul_hover .submenu_bottom{display:none;}
#topmenu .sub-menu li{ padding: 2px 0;}

Gracias por la ayuda.

Ampliación de ancho de menú desplegable en Gatos Perros

sebap04

Brandon Díaz

sebap04

Temas similares