poner imagen de fondo en menu desplegable

gabrielcorr4 · #1 (**permalink**) 29/06/2011, 11:52

Hola, tengo este script de un menu deplegable pero quisiera que en las cabeceras principales donde se despliega el menu apareciera una imagen de fondo. 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>

kenso · #2 (**permalink**) 29/06/2011, 13:29

no se si a esto te refieras esque no te entendi muy bien, si querias la imagen a lo largo de todo el menu o asi. bueno ahi me dices

Cita:

<ul id="menu">
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HOME</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">THEESPECTROMANIA</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HTML</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CSS</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">GRADIENT</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">BORDES</a></li>
</ul></li>
</div>
<style type = "text/css">
.back{
background-image:url('bg-image.png');
background-repeat:no-repeat;
background-color:#99cccc;}
#menu{padding-left:25px; margin-top:15px; }
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;height:20px; background-color:#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;}

gabrielcorr4 · #3 (**permalink**) 29/06/2011, 13:47

Gracias por responder, pero no es asi , a lo que me referia es que por ejemplo en el boton desplegable HOME atras de este texto en vez de ese color especifico turqueza haya una imagen de fondo ¿como se haria?...

kenso · #4 (**permalink**) 29/06/2011, 14:04

asi te lo puse no te sirvio? mira lo que hice fue agregar una clase
<a class="back" href="dfsdf.com">HOME</a></li>
se la pones a la que le quieras asignar una imagen
luego cree la clase

Cita:

.back{background-image:url('imagen.jpg'); <-aquii va laimagen
background-repeat:no-repeat;}

gabrielcorr4 · #5 (**permalink**) 29/06/2011, 14:41

exacto eso era, no me habia fijado que usted le habia puesto una clase solo vi los links que agrego, pero ahora a ese background le pongo una imagen de mi computador y no sale nada, a menos que haya puesto mal el path o algo asi... ya lo revisare.

mi codigo:

Cita:

<body>
<ul id="menu">
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HOME</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">THEESPECTROMANIA</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HTML</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CSS</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">GRADIENT</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">BORDES</a></li>
</ul></li>
</div>
<style type = "text/css">
.back{
background-image:url('EasyPHP-5.3.6.0\www\prueba\lovemoon.jpg');
background-repeat:no-repeat;
background-color:#99cccc;}
#menu{padding-left:25px; margin-top:15px; }
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;height:20px; background-color:#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>