Hola, hice un menú horizontal en CSS, el problema que tengo ahora es que no puedo centrarlo en la página, he utilizado div dentro del que tengo la lista desordenada (ul), text align, right y left al 50% y nada... a ver si alguien puede ayudarme con el misterio jaja
este es mi código html donde está la ul:
Código HTML:
Ver original <div id="contenedorMenu"> <li><a href="#">Menu 1
</a> <li><a href="#">Item 1
</a></li> <li><a href="#">Item 2
</a></li> <li><a href="#">Item 3
</a></li> <li><a href="#">Item 4
</a></li> <li><a href="#">Item 5
</a></li> <li><a href="#">Menu 2
</a> <li><a href="#">Item 1
</a></li> <li><a href="#">Item 2
</a></li> <li><a href="#">Item 3
</a></li> <li><a href="#">Item 4
</a></li> <li><a href="#">Item 5
</a></li> <li><a href="#">Menu 3
</a> <li><a href="#">Item 1
</a></li> <li><a href="#">Item 2
</a></li> <li><a href="#">Item 3
</a></li> <li><a href="#">Item 4
</a></li> <li><a href="#">Item 5
</a></li> <li><a href="#">Menu 4
</a> <li><a href="#">Item 1
</a></li> <li><a href="#">Item 2
</a></li> <li><a href="#">Item 3
</a></li> <li><a href="#">Item 4
</a></li> <li><a href="#">Item 5
</a></li> <li><a href="#">Menu 5
</a> <li><a href="#">Item 1
</a></li> <li><a href="#">Item 2
</a></li> <li><a href="#">Item 3
</a></li> <li><a href="#">Item 4
</a></li> <li><a href="#">Item 5
</a></li> <br class="quitarFloat" />
y este es el CSS:
Código CSS:
Ver original#centro {
margin:0px auto;
}
#contenedorMenu {
position:fixed;
top:0px;
left:0px;
margin:0px;
padding:0px;
width:100%;
height:30px;
background-color:#FFF;
}
#contenedorMenu ul {
display:inline;
margin:0px;
padding:0px;
line-height:30px;
}
#contenedorMenu li {
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background-color:#FFF;
}
#contenedorMenu ul li a {
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
font-size:10px;
color:#000;
text-decoration:none;
width:150px;
height:30px;
display:block;
}
#contenedorMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#contenedorMenu ul li:hover ul {
visibility:visible;
}
/***************************/
#contenedorMenu li:hover {
background-color:#F60;
}
#contenedorMenu ul li:hover ul li:hover a {
background-color:#F90;
}
#contenedorMenu a:hover {
font-weight:bold;
}
.quitarFloat {
clear:both;
margin:0px;
padding:0px;
}