Hola, estoy teniendo unos problemitas con este menu css...y los submenus no se q es lo que hacen q copian la imagen del menu...he estado probando varias cosas pero no puedo lograr eso...aqui lo dejo comentado al css y al html.
Aqui el html...
Código:
<!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="estilos.css" type="text/css">
</head>
<script type="text/javascript" src="funciones.js"></script>
<body>
<div id="principal">
<div id="cabecera">
<div id="titulo">
<h1>Cabecera del sitio</h1>
</div>
</div>
<div id="menu">
<ul>
<li id="inicio"><a href="#"></a>
<ul id="submenu">
<li class="inicio"><a href="#">Area Legal</a></li>
</ul>
</li>
<li id="propiedades"><a href="#">Propiedades</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>
</div>
</body>
</html>
Y aqui el css...
Código:
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
min-width: 680px;
background: #999;
padding:10px;
}
#cabecera {
background: #eee;
}
#titulo {
height:75px;
background:#ccc;
}
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:active{background:url(bot1.jpg) left 51px;}
#inicio a:hover{background:url(bot1.jpg) left 51px;}
#propiedades a{background-image:url(bot2.jpg); width:221px; height:51px;}
#propiedades a:active{background:url(bot2.jpg) left 51px; }
#propiedades a:hover{background:url(bot2.jpg) left 51px;}
#arquitectura a{background-image:url(bot3.jpg); width:137px; height:51px;}
#arquitectura a:active{background:url(bot3.jpg) left 51px; }
#arquitectura a:hover{background:url(bot3.jpg) left 51px;}
#tasaciones a{background-image:url(bot4.jpg); width:130px; height:51px;}
#tasaciones a:active{background:url(bot4.jpg) left 51px; }
#tasaciones a:hover{background:url(bot4.jpg) left 51px;}
#contacto a{background-image:url(bot5.jpg); width:217px; height:51px;}
#contacto a:active{background:url(bot5.jpg) left 51px; }
#contacto a:hover{background:url(bot5.jpg) left 51px; }
.inicio{ width:245px; height:20px; text-align:center;}
.inicio a:active{ left 51px;}
.inicio a:hover{ left 51px;}
#submenu ul li {
display:block;
text-decoration:none;
background-color:#006699;
}
div#menu a {
display:block;
text-decoration:none;
}
div#menu ul li ul {
position:absolute;
}
div#menu ul li ul li {
border:1px 1px 1px 1px solid #069;
}
body div#menu ul li ul {
display:none;
}
div#menu ul li:hover ul, div#menu ul li ul:hover {
display:block;
}