Foros del Web » Creando para Internet » CSS »

imagen de fondo en menu desplegable

Estas en el tema de imagen de fondo en menu desplegable en el foro de CSS en Foros del Web. Hola tengo este script de un menu desplegable, pero queria saber si en vez de poner un fondo de color en las listas de encabezado ...
  #1 (permalink)  
Antiguo 24/06/2011, 12:44
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 6 años, 9 meses
Puntos: 3
imagen de fondo en menu desplegable

Hola tengo este script de un menu desplegable, pero queria saber si en vez de poner un fondo de color en las listas de encabezado principal si se podria poner una imagen de fondo y como seria. Gracias por la ayuda.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> 
<head> 
  <title>Menu desplegable CSS</title> 
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="css/menu.css" type="text/css" /> 
</head> 
<body> 
<ul id="menu">
<li><a href="url...">HOME</a></li>
<li><a href="url...">THEESPECTROMANIA</a></li>
<li><a href="url...">HTML</a>
<ul> 
<li><a href="url...">CENTER</a></li>
<li><a href="url...">FONT</a></li>
</ul></li>
<li><a href="url...">CSS</a>
<ul>
<li><a href="url...">GRADIENT</a></li>
<li><a href="url...">BORDES</a></li>
</ul></li>

<style type = "text/css">
#menu{padding-left:25px; margin-top:15px;}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;
height:20px; background:#99cccc;
border:1px solid; padding:2px;
text-decoration:none;
text-align:center; color:#000;
font-family:arial; font-size:15px;
font-weight:bold;}
#menu li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block; float:none; 
position:relative; padding:0px;}
#menu li:hover ul{display:block; padding-left:0px;}

</style>
</body> 
</html> 

  #2 (permalink)  
Antiguo 25/06/2011, 10:39
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años
Puntos: 361
Respuesta: imagen de fondo en menu desplegable

Hola:

Investiga la etiqueta css background-image o su shorthand background.

Saludos.

  #3 (permalink)  
Antiguo 27/06/2011, 13:38
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 7 años
Puntos: 5
Respuesta: imagen de fondo en menu desplegable

Me desagrada totalmente que el CSS este debajo del cód del menu...
  #4 (permalink)  
Antiguo 28/06/2011, 02:46
 
Fecha de Ingreso: noviembre-2009
Mensajes: 41
Antigüedad: 7 años, 7 meses
Puntos: 10
Respuesta: imagen de fondo en menu desplegable

Hola,
añade el background en el <li> o en el <a>, luego para que en los subniveles no te ponga el background debes anularlo, así sólo te saldrá en el primer nivel.

Código:
ul#menu li a{
  background-image: lo que sea;
}

ul#menu li li a{
   background-image:none;
}

Etiquetas: desplegable, fondo
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 10:40.