Buenas, llevo un par de días intentando que el menú desplegable se me ajuste a lo que yo quiero, sin embargo no lo consigo. He utilizado el código de Mikmoro y lo he adaptado a mi site, sin embargo no consigo ubicarlo dónde quiero y tampoco que los submenús me aparezcan como yo deseo...
Ahora mismo lo tengo así:
Me gustaría que el menú apareciese en la barra negra, he pensado en ajustarlo con un position:relative; marcandole el top y el left, pero no se si es la manera correcta...les muestro mi css...también me gustaría que el espacio que queda entre los submenús fuese cero, he estado provando con los padding pero no lo he conseguido, espero me puedan ayudar porqué esto es bastante desesperante, muchas gracias de antemano.
estilo.css:
Código HTML:
@charset "utf-8";
* {
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}
#menu {
font-size:0.9em;
margin:20px auto;
text-align:center;
}
#menu ul {
list-style-type:none;
}
#menu ul li.nivel1 {
float:left;
}
#menu ul li a {
background-color: #000000;
border:1px solid #000000;
color: #FFFFFF;
display:block;
padding:0px;
position:relative;
text-decoration:none;
}
#menu ul li:hover {
position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #000000;
color: #FFFFFF;
position:relative;
}
#menu ul li a.nivel1 {
display:block !important;
position:relative;
}
#menu ul li ul {
display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display:block;
left:0;
position:absolute;
}
#menu ul li ul li a {
border-top-color:#000000;
padding:0px 0 0px;
}
#menu ul li ul li a:hover {
border-top-color:#000000;
position:relative;
}
table.falsa {
border:0 none;
border-collapse:collapse;
float:left;
position:relative;
}
body
{
color: #FFFFFF;
background-color: #000000;
background-image: url(../images/fondo.gif);
font-family: Verdana,Helvetica,sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 10pt;
}
#topleftmenu
{
background-image:url(../images/topbar-left.gif);
background-position:left center;
background-repeat:no-repeat;
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:right;
}
#topmenu {
background-image:url(../images/topbar-fondo.gif);
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
height:36px;
margin:0;
padding:0;
}
#topmenu .moduletable
{
display:inline;
}
a:link {
text-decoration:none;
}
dl {
margin: 0 0 5px 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 0 0;
}
ul {
padding: 0 0;
margin: 0 0;
}
Index.php:
Código HTML:
<div id="topmenu">
<div id="topleftmenu">
<div id="menu">
<ul>
<li class="nivel1"><a class="nivel1" href="#"><img src="images/carrito.jpg" width="21" height="20"></a></li>
<li class="nivel1"><a href="#">Inicio</a></li>
<li class="nivel1">Catálogo
<ul>
<li><a class="nivel1" href="#">Novedades</a></li>
<li><a class="nivel1" href="#">Reposiciones</a></li>
<li><a class="nivel1" href="#">Ofertas</a></li>
</ul>
</li>
<li class="nivel1">MiCuenta
<ul>
<li><a class="nivel1" ref="#">Login/Logout</a></li>
<li><a class="nivel1" href="#">Cambiar Clave</a></li>
<li><a class="nivel1" href="#">Crear Cuenta</a></li>
</ul>
</li>
<li class="nivel1">Links
<ul>
<li><a class="nivel1" href="#">Clubs</a></li>
<li><a class="nivel1" href="#">Festivales</a></li>
<li><a class="nivel1" href="#">Dj's</a></li>
<li><a class="nivel1" href="#">Amigos</a></li>
<li><a class="nivel1" href="#">Colaboradores</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> Un saludo!