imagen de fondo en menu desplegable

gabrielcorr4 · #1 (**permalink**) 24/06/2011, 12:44

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>

jomaruro · #2 (**permalink**) 25/06/2011, 10:39

Hola:

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

Saludos.

rossijona · #3 (**permalink**) 27/06/2011, 13:38

Me desagrada totalmente que el CSS este debajo del cód del menu...

rege · #4 (**permalink**) 28/06/2011, 02:46

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;
}