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>