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>