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

  • Autor Autor sebap04
  • Fecha de inicio Fecha de inicio

sebap04

Dseda
Verificación en dos pasos activada
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!!
 
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.