Lograr que la anchura de mi ul se adapte al texto

[Jor1980]

Hola, tengo una ul dentro de otra ul en mi página.

La ul secundaria necesito que adapte su anchura a la anchura del a tag con más carácteres, para que me queden todos los caracteres de los li en la misma línea.

¿Cómo puedo hacerlo?

[angelfcm]

Hola!,

Siempre es necesario el código fuente para saber que es exactamente lo que quieres.
Necesito el código fuente y una mejor explicación.

Saludos!

[ArturoGallegos]

float left or right según aplique a tu caso... y como ya dijeron sin código no hay forma de decirte o aconsejarte algo mas

[Jor1980]

Os adjunto el código html y el css.

La ul principal de mi código se llama navigationmenu, la ul que me da problemas es la contenida desntro de navigationmenu, porque cuando se despliegan los li lo hacen en forma de columna como yo quiero, pero alguno li cuyo tag a tiene demasiados caracteres digamos se muestran en dos líneas de la columna y yo quiero que aparezcan en una sola línea

Código PHP:

  <ul id="navigationmenu"> 
          <li><a href="#">Seguros de Coche</a> 
                  <ul> 
                    <li><a href="#">Póliza Básica</a></li> 
                    <li><a href="#">Póliza 7</a></li> 
                    <li><a href="#">Nueva Póliza 10</a></li> 
                    <li><a href="#">Póliza Líder</a></li> 
                    <li><a href="#">Póliza Todo Riesgo 100</a></li> 
                </ul><!--end Seguros de Coche list---> 
      </li><!--end Seguros de Coche--> 
       
       
       <li><a href="#">Seguros de Moto</a> 
               <ul> 
                <li><a href="#">Moto Básica</a></li> 
                <li><a href="#">Moto Diez</a></li> 
                <li><a href="#">Moto Líder</a></li> 
            </ul><!--end Seguros de Moto ul--> 
       </li> 
                  
                
                
          <li><a href="#">Seguros Generales</a> 
                  <ul> 
                    <li><a href="#">Hogar Básico</a></li> 
                    <li><a href="#">Hogar Familiar</a></li> 
                    <li><a href="#">Hogar Total</a></li> 
                    <li><a href="#">Hogar Platino</a></li> 
                    <li><a href="#">Seguro de Comercios</a></li> 
                    <li><a href="#">Seguro de Decesos</a></li> 
                    <li><a href="#">Seguro de Viajes</a></li> 
                    <li><a href="#">Responsabilidad Civil</a></li> 
                    <li><a href="#">Seguro de Comunidades</a></li> 
                    <li><a href="#">Seguro de Accidentes Personales</a></li> 
                </ul><!--end ul seguros generales--> 
           </li><!--end Seguros Generales li-->   
            
               
             <li><a href="#">Seguros de Salud</a> 
                  <ul> 
                    <li><a href="#">Reembolso de Gastos</a></li> 
                    <li><a href="#">Asistencia Sanitaria</a></li> 
                    <li><a href="#">Seguros Indemnización por Baja</a></li> 
                    <li><a href="#">Salud Dental</a></li> 
                </ul><!--end ul Seguros de Salud-->     
          </li><!--end li Seguros de Salud--> 
           
           
             <li>Seguros de Vida 
                  <ul> 
                     <li><a href="#">Planes de Pensiones</a></li> 
                     <li><a href="#">Seguro de Vida</a></li> 
                     <li><a href="#">Fondos de Inversión</a></li> 
                     <li><a href="#">PIAS</a></li> 
                </ul><!--end Seguros de Vida ul--> 
          </li><!--end Seguros de Vida li--> 
              
           
          <li>Productos Bancarios 
              <ul> 
                <li><a href="#">Hipotecas</a></li> 
                <li><a href="#">Consumo</a></li> 
                <li><a href="#">Cuenta Corriente</a></li> 
                <li><a href="#">Depósitos</a></li> 
                <li><a href="#">Líneas ICO</a></li> 
            </ul><!--end Productos Bancarios ul-->     
          </li><!--end Productos Bancario li--> 
    </ul><!--navigationmenu end-->  
   

Y el css:

Código PHP:

  #navigationmenu{ 
    margin:0px; 
    padding:0px; 
    height:30px; 
    background-color:#3F0; 
    border-bottom:#999 solid; 
    display:block; 
} 
 
#navigationmenu a{ 
    text-decoration:none; 
    color:#000; 
    text-align:center; 
} 
 
 
 
#navigationmenu li{ 
    position:relative; 
    height:inherit; 
    float:left; 
    list-style:none; 
    margin:0px; 
    padding:0px; 
    display:block; 
    width:150px; 
    text-align:center; 
} 
 
#navigationmenu li:hover{ 
    background-color:#999; 
} 
 
 
 
 
#navigationmenu ul li a{ 
    text-align:left; 
    height:30px;  
    width:150px; 
    display:block; 
    color:#000; 
} 
 
 
 
 
#navigationmenu ul{ 
    position:absolute; 
    visibility:hidden; 
    top:30px; 
 } 
  
 
  
 #navigationmenu li:hover ul{ 
    visibility:visible; 
    background-color:#999; 
}  
   

[angelfcm]

Hola!,
Agrega ésto al css:

Código CSS:

#navigationmenu ul li, #navigationmenu ul li a{
   width:210px;
}
 

Con eso ya se mostrará completo el texto.

Una cosa, en IE el hover sólo funcióna con <a>, por lo que tu menu no se mostrará completo en IE.

Saludos!.

Atención: si quieres que siga tu mensaje, agradéce mis mensajes (karma), ya que así puedo ver rápidamente si ya respondíste mi mensaje.

[ArturoGallegos]

para que se mantenga en una sola linea procura evitar darle un ancho fijo a la lista, de igual forma puedes aplicar un white-space:nowrap; para los li con lo que los forzaras a que no se produzcan saltos de linea

Código CSS:

#navigationmenu li{white-space:nowrap;}
 

Iniciado por angelfcm

Hola!,
Una cosa, en IE el hover sólo funcióna con <a>, por lo que tu menu no se mostrará completo en IE.

Saludos!.

Atención: si quieres que siga tu mensaje, agradéce mis mensajes (karma), ya que así puedo ver rápidamente si ya respondíste mi mensaje.

compañero @angelfcm no puede estar usted mas equivocado el efecto hover no requiere que sea un enlace para funcionar lo único con lo que me lo puedo explicar es que usted esta creando sus sitios sin validar omitiendo el doctype por lo que los navegadores trabajan en modo quirks por lo que no interpretan adecuadamente el código.

Nota: si su comentario se refiere a que el menú no funcionara en IE6 debería empezar a olvidarse de el ya esta en el olvido, si pretende dar soporte a este navegador puede visitar este link con ejemplos de como hacerlo -> clic aquí

Nota2: compañeros por favor absténganse de pedir karma a cambio de su ayuda, si su respuesta es grata y/o de ayuda para los usuarios estos darán karma sin que sea solicitado.
Siempre que un usuario responde al tema usted recibe un mensaje en su correo electrónico así que no necesita el karma para darse cuenta.

[Jor1980]

Iniciado por Ag666

para que se mantenga en una sola linea procura evitar darle un ancho fijo a la lista, de igual forma puedes aplicar un white-space:nowrap; para los li con lo que los forzaras a que no se produzcan saltos de linea

Código CSS:

#navigationmenu li{white-space:nowrap;}
 

compañero @angelfcm no puede estar usted mas equivocado el efecto hover no requiere que sea un enlace para funcionar lo único con lo que me lo puedo explicar es que usted esta creando sus sitios sin validar omitiendo el doctype por lo que los navegadores trabajan en modo quirks por lo que no interpretan adecuadamente el código.

Nota: si su comentario se refiere a que el menú no funcionara en IE6 debería empezar a olvidarse de el ya esta en el olvido, si pretende dar soporte a este navegador puede visitar este link con ejemplos de como hacerlo[URL="http://www.araudi.net/ejemplos/menus_desplegables_CSS.html"] -> clic aquí[/URL]

Nota2: compañeros por favor absténganse de pedir karma a cambio de su ayuda, si su respuesta es grata y/o de ayuda para los usuarios estos darán karma sin que sea solicitado.
Siempre que un usuario responde al tema usted recibe un mensaje en su correo electrónico así que no necesita el karma para darse cuenta.

He probado poniendo white-space:nowrap; pero el resultado es que todos los li aparecen en una linea y lo que yo busco es que cada li esté en una línea pero evitando que aquellos li que tienen muchos caracteres aparezcan presentados en dos lineas.

Al final lo solucioné con esto:

#navigationmenu li li{
white-space:nowrap;
}

ahora se presentan en una línea sin problema, pero el problema que tengo es que el fondo de los li de la segunda ul no adapta su anchura a la del texto del li como se puede ver en la imagen que adjunto

[jomaruro]

Hola:

Iniciado por angelfcm

Una cosa, en IE el hover sólo funcióna con <a>, por lo que tu menu no se mostrará completo en IE.

Iniciado por Ag666

compañero @angelfcm no puede estar usted mas equivocado el efecto hover no requiere que sea un enlace

Vamos a puntualizar un poco, las dos respuestas son a la vez ciertas y falsas. Para que las pseudoclases funcionen en IE6 deben ser enlaces, en los navegadores posteriores esta condición no es necesaria.

Con lo cual la afirmación de angelfcm sería totalmente cierta si hubiera especificado que el IE al que se refiere fuera la versión 6. Con lo cual la afirmación de Ag666 sería también cierta en el resto de las versiones de IE.

Saludos.