Aqui ando de nuevo, desp de unas cuantas pruebas y entender un poco mas el CSS puedo decir que he acabado, pero solo me anda bien en FireFox y en Opera, pero como siempre el IE6 no, a los submenus no me los muestra uno debajo del otro, sino uno al costado del otro...es decir hacia la derecha...cual es el error?
.html
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menú horizontal con CSS</title>
<link rel="StyleSheet" href="estilos3.css" type="text/css">
</head>
<script type="text/javascript" src="funciones.js"></script>
<body>
<div id="principal">
<div id="menu">
<ul>
<li id="inicio"><a href="#"></a>
<ul>
<li><a href="#"></a></li>
</ul>
</li>
<li id="propiedades"><a href="#"></a>
<ul>
<li><a href="#">Compra</a></li>
<li><a href="#">Venta</a></li>
<li><a href="#">Alquiler</a></li>
<li><a href="#">Alquiler Temporario</a></li>
</ul>
</li>
<li id="arquitectura"><a href="#"></a></li>
<li id="tasaciones"><a href="#"></a></li>
<li id="contacto"><a href="#"></a></li>
</ul>
</div><!--finmenu-->
</div>
</body>
</html>
.css
Código HTML:
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
div#menu {
float: left;
}
#menu li {
float:left;
position:relative;
list-style:none;
}
#inicio a{background-image:url(bot1.jpg); width:245px; height:51px;}
#inicio a:hover{background:url(bot1.jpg) left 51px;}
#inicio a:active{background:url(bot1.jpg) left 51px;}
#propiedades a{background-image:url(bot2.jpg); width:221px; height:51px;}
#propiedades a:hover{background:url(bot2.jpg) left 51px;}
#propiedades a:active{background:url(bot2.jpg) left 51px; }
#arquitectura a{background-image:url(bot3.jpg); width:137px; height:51px;}
#arquitectura a:hover{background:url(bot3.jpg) left 51px;}
#arquitectura a:active{background:url(bot3.jpg) left 51px; }
#tasaciones a{background-image:url(bot4.jpg); width:130px; height:51px;}
#tasaciones a:hover{background:url(bot4.jpg) left 51px;}
#tasaciones a:active{background:url(bot4.jpg) left 51px; }
#contacto a{background-image:url(bot5.jpg); width:217px; height:51px;}
#contacto a:hover{background:url(bot5.jpg) left 51px; }
#contacto a:active{background:url(bot5.jpg) left 51px; }
#propiedades ul{
border:0px;
height:20px;
}
#propiedades ul li a{
color:#006699;
background:none;
text-align:center;
height:20px;
background:none;
}
#propiedades ul li a:hover{
font-weight:bold;
text-align:center;
height:20px;
background:url(submenu1.jpg);
}
div#menu a {
display:block;
text-decoration:none;
background-color:#99CC00;
}
div#menu ul li ul {
position:absolute;
}
div#menu ul li ul li {
border:0px;
}
body div#menu ul li ul {
display:none;
}
div#menu ul li:hover ul, div#menu ul li ul:hover {
display:block;
}