Tema: Ayuda Menú horizontal con submenú horizontal
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/08/2010, 08:51
danielchango
 
Fecha de Ingreso: agosto-2010
Mensajes: 3
Antigüedad: 14 años, 4 meses
Puntos: 0
Ayuda Menú horizontal con submenú horizontal
Hola a Todos

Soy nuevo en foros del web, por lo que pido disculpas de entrada si esta duda debe estar publicada en otra sección o ya fue contestada, pero al no encontrar más recursos o guías aquí va:

Estoy haciendo un menú horizontal desplegable con un submenú desplegable también horizontal, tomé como inspiración el menú de [URL="http://www.nationalgeographic.com/"]National Geographic[/URL] quise hacerlo desde cero para prender como funcionaba, pero no he logrado centrar el submenú, pues este carga alineado a cada botón del menú principal.

He intentado con un contenedor (inside) al que le doy el margen y el ancho de mi web, también intenté con un margin:0 auto; con un left:0; y otras opciones más, pero no lo he logrado alinear dentro del contenedor.

copio el código por si me pueden dar una mano

gracias

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin título</title>
  6. <link href="css/newmenu.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.     <div class="inside">
  11.             <div id="menu">
  12.                 <ul>
  13.                     <li class="nav1">
  14.                         <h6><a href="#">Item1</a></h6>
  15.                             <ul class="nav">
  16.                                 <li><a href="#">subitem1-1</a></li>
  17.                                 <li><a href="#">subitem1-2</a></li>
  18.                                 <li><a href="#">subitem1-3</a></li>
  19.                                 <li><a href="#">subitem1-4</a></li>
  20.                                 <li><a href="#">subitem1-5</a></li>
  21.                                 <li><a href="#">subitem1-6</a></li>
  22.                                 <li><a href="#">subitem1-7</a></li>
  23.                             </ul>
  24.                     </li>
  25.                     
  26.                     <li class="nav2">
  27.                         <h6><a href="#">Item2</a></h6>
  28.                             <ul class="nav">
  29.                                 <li><a href="#">subitem2-1</a></li>
  30.                                 <li><a href="#">subitem2-2</a></li>
  31.                                 <li><a href="#">subitem2-3</a></li>
  32.                                 <li><a href="#">subitem2-4</a></li>
  33.                                 <li><a href="#">subitem2-5</a></li>
  34.                                 <li><a href="#">subitem2-6</a></li>
  35.                                 <li><a href="#">subitem2-7</a></li>
  36.                                 <li><a href="#">subitem2-8</a></li>
  37.                                 <li><a href="#">subitem2-9</a></li>
  38.                                 <li><a href="#">subitem2-10</a></li>
  39.                             </ul>
  40.                     </li>
  41.                     
  42.                     <li class="nav3">
  43.                         <h6><a href="#">Item3</a></h6>
  44.                             <ul class="nav">
  45.                                 <li><a href="#">subitem3-1</a></li>
  46.                                 <li><a href="#">subitem3-2</a></li>
  47.                                 <li><a href="#">subitem3-3</a></li>     
  48.                                 <li><a href="#">subitem3-4</a></li>
  49.                                 <li><a href="#">subitem3-5</a></li>
  50.                             </ul>
  51.                     </li>
  52.                     
  53.                     <li class="nav4">
  54.                         <h6><a href="#">Item4</a></h6>
  55.                             <ul class="nav">
  56.                                 <li><a href="#">subitem4-1</a></li>
  57.                                 <li><a href="#">subitem4-2</a></li>
  58.                                 <li><a href="#">subitem4-3</a></li>
  59.                                 <li><a href="#">subitem4-4</a></li>
  60.                             </ul>
  61.                     </li>
  62.  
  63.                     <li class="nav5">
  64.                         <h6><a href="#">Item5</a></h6>
  65.                             <ul class="nav">
  66.                                 <li><a href="#">subitem5-1</a></li>
  67.                                 <li><a href="#">subitem5-2</a></li>
  68.                                 <li><a href="#">subitem5-3</a></li>
  69.                                 <li><a href="#">subitem5-4</a></li>
  70.                                 <li><a href="#">subitem5-5</a></li>
  71.                                 <li><a href="#">subitem5-6</a></li>
  72.                                 <li><a href="#">subitem5-7</a></li>
  73.                                 <li><a href="#">subitem5-8</a></li>
  74.                                 <li><a href="#">subitem5-9</a></li>
  75.                             </ul>
  76.                     </li>
  77.                     
  78.                     <li class="nav6">
  79.                         <h6><a href="#">Item6</a></h6>
  80.                             <ul class="nav">
  81.                                 <li><a href="#">subitem6-1</a></li>
  82.                                 <li><a href="#">subitem6-2</a></li>
  83.                                 <li><a href="#">subitem6-3</a></li>
  84.                                 <li><a href="#">subitem6-4</a></li>
  85.                                 <li><a href="#">subitem6-5</a></li>
  86.                                 <li><a href="#">subitem6-6</a></li>
  87.                                 <li><a href="#">subitem6-7</a></li>
  88.                                 <li><a href="#">subitem6-8</a></li>
  89.                             </ul>
  90.                     </li>
  91.                     
  92.                     <li class="nav7">
  93.                         <h6><a href="#">Item7</a></h6>
  94.                             <ul class="nav">
  95.                                 <li>subitem7-1</li>
  96.                             </ul>
  97.                     </li>               
  98.                 </ul><!-- final ul -->
  99.             </div><!-- final menú div -->
  100.     </div><!-- final inside div -->
  101.  
  102. </body>
  103. </html>


-------------------------
Código CSS: 
Ver original
  1. /*  clases generales */
  2. body {
  3. font-family: Verdana, Arial, Helvetica, sans-serif;
  4. font-size: 12px;
  5. color: #fff;
  6. background-color: #000000;
  7. text-decoration:none;
  8. }
  9. div.inside{
  10. width: 955px;
  11. margin: 0 auto;
  12. }
  13.  
  14. /* menu */
  15. #menu {
  16. background-color: #000;
  17. width: 955px;
  18. height: 36px;
  19. float:right;
  20. }
  21. #menu h6 a{
  22. color: #fff;
  23. text-decoration:none;
  24. font-size: 12px;
  25. padding:28px;
  26. position: retalive;
  27. }
  28. ul.nav {
  29. padding: 10px;
  30. margin: 0;
  31. }
  32. #menu li {
  33. list-style: none;
  34. float: left;
  35. margin: 0 auto;
  36. }
  37. #menu li a. {
  38. display: block;
  39. text-decoration: none; 
  40. font-weight: bold;
  41. }
  42. #menu li ul {
  43. display: none;
  44. margin: 0 auto;
  45. }
  46. #menu li:hover ul, #menu li.hover ul {
  47. position: absolute;
  48. display: inline;
  49. margin: 0 auto;
  50. }
  51. #menu li:hover li, #menu li.hover li {
  52. float: left;
  53. padding:5px;
  54. }
  55. #menu li:hover li a, #menu li.hover li a {
  56. color: #fff;
  57. text-decoration: none;
  58. }
  59. #menu li li a:hover {
  60. color: #000;
  61. }
  62. li.nav1:hover{
  63. background-color:#e35959;
  64. }
  65. li.nav1:hover ul, li.nav1.hover ul {
  66. background-color:#e35959;
  67. }
  68. li.nav2:hover{
  69. background-color:#81baf4;
  70. }
  71. li.nav2:hover ul, li.nav2.hover ul {
  72. background-color:#81baf4;
  73. }
  74. li.nav3:hover{
  75. background-color:#aade46;
  76. }
  77. li.nav3:hover ul, li.nav3.hover ul {
  78. background-color:#aade46;
  79. }
  80. li.nav4:hover{
  81. background-color:#51d4a1;
  82. }
  83. li.nav4:hover ul, li.nav4.hover ul {
  84. background-color:#51d4a1;
  85. }
  86. li.nav5:hover{
  87. background-color:#b9d3f6;
  88. }
  89. li.nav5:hover ul, li.nav5.hover ul {
  90. background-color:#b9d3f6;
  91. }
  92. li.nav6:hover{
  93. background-color:#d9b9f6;
  94. }
  95. li.nav6:hover ul, li.nav6.hover ul {
  96. background-color:#d9b9f6;
  97. }
  98. li.nav7:hover{
  99. background-color:#f86cd9;
  100. }
  101. li.nav7:hover ul, li.nav7.hover ul {
  102. background-color:#f86cd9;
  103. }