Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/06/2010, 15:12
rodromoptero
 
Fecha de Ingreso: junio-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Menu Horizontal CSS

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
  1. <div id="centro">
  2.   <div id="contenedorMenu">
  3.     <ul>
  4.       <li><a href="#">Menu 1</a>
  5.         <ul>
  6.           <li><a href="#">Item 1</a></li>
  7.           <li><a href="#">Item 2</a></li>
  8.           <li><a href="#">Item 3</a></li>
  9.           <li><a href="#">Item 4</a></li>
  10.           <li><a href="#">Item 5</a></li>
  11.         </ul>
  12.       </li>
  13.     </ul>
  14.     <ul>
  15.       <li><a href="#">Menu 2</a>
  16.         <ul>
  17.           <li><a href="#">Item 1</a></li>
  18.           <li><a href="#">Item 2</a></li>
  19.           <li><a href="#">Item 3</a></li>
  20.           <li><a href="#">Item 4</a></li>
  21.           <li><a href="#">Item 5</a></li>
  22.         </ul>
  23.       </li>
  24.     </ul>
  25.     <ul>
  26.       <li><a href="#">Menu 3</a>
  27.         <ul>
  28.           <li><a href="#">Item 1</a></li>
  29.           <li><a href="#">Item 2</a></li>
  30.           <li><a href="#">Item 3</a></li>
  31.           <li><a href="#">Item 4</a></li>
  32.           <li><a href="#">Item 5</a></li>
  33.         </ul>
  34.       </li>
  35.     </ul>
  36.     <ul>
  37.       <li><a href="#">Menu 4</a>
  38.         <ul>
  39.           <li><a href="#">Item 1</a></li>
  40.           <li><a href="#">Item 2</a></li>
  41.           <li><a href="#">Item 3</a></li>
  42.           <li><a href="#">Item 4</a></li>
  43.           <li><a href="#">Item 5</a></li>
  44.         </ul>
  45.       </li>
  46.     </ul>
  47.     <ul>
  48.       <li><a href="#">Menu 5</a>
  49.         <ul>
  50.           <li><a href="#">Item 1</a></li>
  51.           <li><a href="#">Item 2</a></li>
  52.           <li><a href="#">Item 3</a></li>
  53.           <li><a href="#">Item 4</a></li>
  54.           <li><a href="#">Item 5</a></li>
  55.         </ul>
  56.       </li>
  57.     </ul>
  58.     <br class="quitarFloat" />
  59.   </div>
  60. </div>

y este es el CSS:
Código CSS:
Ver original
  1. #centro {
  2.     margin:0px auto;
  3. }
  4. #contenedorMenu {
  5.     position:fixed;
  6.     top:0px;
  7.     left:0px;
  8.     margin:0px;
  9.     padding:0px;
  10.     width:100%;
  11.     height:30px;
  12.     background-color:#FFF;
  13. }
  14. #contenedorMenu ul {
  15.     display:inline;
  16.     margin:0px;
  17.     padding:0px;
  18.     line-height:30px;
  19. }
  20. #contenedorMenu li {
  21.     margin:0px;
  22.     padding:0px;
  23.     list-style:none;
  24.     float:left;
  25.     position:relative;
  26.     background-color:#FFF;
  27. }
  28. #contenedorMenu ul li a {
  29.     text-align:center;
  30.     font-family:Georgia, "Times New Roman", Times, serif;
  31.     color:#333;
  32.     font-size:10px;
  33.     color:#000;
  34.     text-decoration:none;
  35.     width:150px;
  36.     height:30px;
  37.     display:block;
  38. }
  39. #contenedorMenu ul ul {
  40.     position:absolute;
  41.     visibility:hidden;
  42.     top:30px;
  43. }
  44. #contenedorMenu ul li:hover ul {
  45.     visibility:visible;
  46. }
  47.  
  48. /***************************/
  49. #contenedorMenu li:hover {
  50.     background-color:#F60;
  51. }
  52. #contenedorMenu ul li:hover ul li:hover a {
  53.     background-color:#F90;
  54. }
  55. #contenedorMenu a:hover {
  56.     font-weight:bold;
  57. }
  58. .quitarFloat {
  59.     clear:both;
  60.     margin:0px;
  61.     padding:0px;
  62. }