Foros del Web » Creando para Internet » CSS »

[Duda] Acerca de la hoja de estilo

Estas en el tema de [Duda] Acerca de la hoja de estilo en el foro de CSS en Foros del Web. ¿Qué valor he de modificar para que el ancho de la opción del menú principal sea igual al ancho del sub-menú? Ejemplo de lo que ...
  #1 (permalink)  
Antiguo 24/05/2010, 02:34
 
Fecha de Ingreso: febrero-2010
Mensajes: 49
Antigüedad: 7 años, 10 meses
Puntos: 0
[Duda] Acerca de la hoja de estilo

¿Qué valor he de modificar para que el ancho de la opción del menú principal sea igual al ancho del sub-menú?

Ejemplo de lo que tengo:


Ejemplo de lo que busco:


Parte del submenú
Código HTML:
#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
He pensado en hacer esto:

Código HTML:
#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:[COLOR="Red"]auto[/COLOR]; height:auto; z-index:300;}
Pero no me funciona.
Luego tengo otra duda, sería la siguiente.
¿Qué valor he de modificar para editar el subrayado de los submenús?

Ejemplo de cómo está:

Ejemplo de cómo quiero:


La hoja de estilo al completo sería la siguiente:
Código:
.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {
	padding:0;
	margin:0;
	list-style:none;
	width:880px;
	height:38px;
	background:#fff url(three_0.gif) repeat-x;
	position:relative;
	z-index:200;
	font-family:arial, verdana, sans-serif;
	left: 1;
	clip: rect(auto,auto,auto,2);
}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#fff; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 18px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 18px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:0; top:38px; background: #fff; padding:3px; border:1px solid #1C5279; white-space:nowrap; width:auto; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3a93d2 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

Última edición por cagoncete; 24/05/2010 a las 03:29
  #2 (permalink)  
Antiguo 24/05/2010, 03:19
Avatar de Atorort  
Fecha de Ingreso: abril-2010
Ubicación: Valencia
Mensajes: 127
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: [Duda] Acerca de la hoja de estilo

Prueba a meter a cada elemento del menu en una class y llamar a su submenu con la misma class, dandole el ancho deseado.
  #3 (permalink)  
Antiguo 24/05/2010, 03:56
 
Fecha de Ingreso: febrero-2010
Mensajes: 49
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: [Duda] Acerca de la hoja de estilo

Cita:
Iniciado por Atorort Ver Mensaje
Prueba a meter a cada elemento del menu en una class y llamar a su submenu con la misma class, dandole el ancho deseado.
He conseguido la primera parte, más o menos pero el fallo que aprecio es que con firefox se ve bien el ancho de los submenus pero en IE se aprecia fatal xD

Etiquetas: estilo, hoja
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:50.