listas desplegables pegadas

gabrielcorr4 · #1 (**permalink**) 27/07/2011, 10:43

Hola, tengo un problema quiero hacer 2 listas desplegables horizontales pero por mas que las configuro bien separadas siempre me salen pegadas, he visto varias faqs y no veo solucion, gracias.

mi codigo:

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>
<BODY BGCOLOR="#000080">
<div align="center"><img src ="lovemoon.jpg" width="250" height="34" /><img src="luna romantica.jpg" alt="" width="500" height="104" />
  
  <SPAN STYLE="position:absolute; top:15px; left:782px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 62px; color: #FFF;" > 
    
    Hola 
    
    <?php
	echo   $_COOKIE['usuario1'];
	?>
    
  </SPAN>
  
 
<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>

<ul id="menu1">
<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:5px;}
#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;}


#menu1{padding-left:25px; margin-top:300px;}
#menu1 li{list-style:none; float:left;}
#menu1 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;}
#menu1 li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu1 li ul{display:none; position:absolute;}
#menu1 li ul li {display:block; float:none; 
position:relative; padding:0px;}
#menu1 li:hover ul{display:block; padding-left:0px;}

</style>


</body> 
</html>