Tema: Sigo con mi problemita de Menu
Ver Mensaje Individual
  #23 (permalink)  
Antiguo 15/03/2011, 13:17
Avatar de ContactarNET
ContactarNET
 
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 13 años, 7 meses
Puntos: 3
Respuesta: Sigo con mi problemita de Menu
Te dejo el codigo, esta sin estilo, se lo tendrias que aplicar vos:

Código HTML: 
Ver original
  1. <head>
  2. <title></title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <meta http-equiv="Content-Style-Type" content="text/css" />
  5. <link href="style.css" rel="stylesheet" type="text/css" />
  6. <link href="layout.css" rel="stylesheet" type="text/css" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  8. <script src="js/cufon-yui.js" type="text/javascript"></script>
  9. <script src="js/cufon-replace.js" type="text/javascript"></script>
  10. <script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
  11. <script src="js/Myriad_Pro_300.font.js" type="text/javascript"></script>
  12.  
  13. </head>
  14. <body id="page1">
  15.  <div class="right_bgd"></div>
  16.   <div class="tail-top">
  17.     <div class="tail-top1">
  18.         <div class="tail-bottom">
  19.             <div class="main">
  20.                 <div id="header">
  21.                     <div class="menu">
  22.                     <div id="menu">
  23. <ul>
  24.   <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
  25. <!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
  26.  
  27.     <ul>
  28.         <li><a href="#">Opción 1.1</a></li>
  29.         <li><a href="#">Opción 1.2</a></li>
  30.     </ul>
  31. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  32.   </li>
  33.   <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
  34. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
  35.  
  36.     <ul>
  37.         <li><a href="#">Opción 2.1</a></li>
  38.         <li><a href="http://www.google.es">Opción 2.2</a></li>
  39.         <li><a href="#">Opción 2.3</a></li>
  40.         <li><a href="#">Opción 2.4</a></li>
  41.         <li><a href="#">Opción 2.5</a></li>
  42.  
  43.     </ul>
  44. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  45. </li>
  46.   <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
  47. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
  48.     <ul>
  49.         <li><a href="#">Opción 3.1</a></li>
  50.         <li><a href="#">Opción 3.2</a></li>
  51.         <li><a href="#">Opción 3.3</a></li>
  52.  
  53.     </ul>
  54. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  55. </li>
  56.   <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
  57. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
  58.     <ul>
  59.         <li><a href="#">Opción 4.1</a></li>
  60.         <li><a href="#">Opción 4.2</a></li>
  61.         <li><a href="#">Opción 4.3</a></li>
  62.  
  63.         <li><a href="#">Opción 4.4</a></li>
  64.     </ul>
  65. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  66. </li>
  67.   <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
  68. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
  69.     <ul>
  70.         <li><a href="#">Opción 5.1</a></li>
  71.         <li><a href="#">Opción 5.2</a></li>
  72.  
  73.         <li><a href="#">Opción 5.3</a></li>
  74.     </ul>
  75. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  76. </li>
  77. </ul>
  78. </div>
  79.  
  80.                 </div>
  81.               </div>
  82.          </div>
  83.      </div>
  84.   </div>
  85. </body>
  86. </html>



y el CSS

Código CSS: 
Ver original
  1. * { margin:0; padding:0;}
  2. html, body { height:100&#37;; }
  3. body {font-size:100%; line-height:1em; min-width:960px; background:#1e0c00}
  4. html, input, textarea   {   font-family: comics sans ms; 
  5.         color:#e6d9c6;  }   
  6.  
  7. .alignMiddle{ vertical-align:middle}
  8. .alignCenter{ text-align: center}
  9. .container1{ width:100%}
  10. object { vertical-align:top; outline:none}
  11. .clear { clear:both;}
  12. .fleft{ float:left}
  13. .fright{ float:right}
  14. div.container { overflow:hidden; width: 100%;}
  15. a img{ border:0}
  16. img{ vertical-align:top;  }
  17.  
  18. a{color:#ffe491; text-decoration:underline; outline:none} 
  19. a:hover{text-decoration:none}
  20.  
  21. .link{color:#ede6c4;}
  22.  
  23.  
  24. #content ul{margin:0; padding:0; list-style:none;}
  25. #content ul li{background:url(images/marker.gif) top left no-repeat; background-position:0 9px; margin:0; padding-left:12px; }
  26. #content ul li a{color:#ede6c4; text-decoration: none; line-height:1.69em; font-weight:bold} 
  27. #content ul li a:hover { text-decoration:underline; }
  28.  
  29. .link-1 { display:block; float:left; background:url(images/link_bg.gif) repeat-x left top; color:#fffef6; text-decoration:none; }
  30. .link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; font-size:1.38em}
  31. .link-1  b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:4px 16px 8px 15px; font-weight:normal; font-style:normal;}
  32. .link-1:hover{ text-decoration:none; color:#000000}
  33.  
  34.  
  35. /*header*/
  36. #header {font-size:1.1875em; color:#FFFFFF }
  37. #header .logo{ margin:16px 0 0 379px }
  38. #header .slogan{ margin:132px 0 0 45px }
  39. #header .menu{
  40.     margin:154px 0 0 49px;
  41.     position:absolute;
  42.     width:954px;
  43.     left: -48px;
  44.     top: -6px;
  45.     height: 129px;
  46. }
  47. #header .icon{margin:93px 0 0 859px; position:absolute;}
  48.  
  49.  
  50. #header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
  51. #header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat;  }
  52. #header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}
  53.  
  54. #header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
  55. #header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat;  }
  56. #header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }
  57.  
  58.  
  59. /* Submenu Gabriel*/
  60.  
  61. #menu {  text-align: center;
  62. font-size: 0.7em;
  63. width: 820px;
  64. margin: 20px auto;
  65. }
  66. #menu ul { list-style-type: none;}
  67. #menu ul li.nivel1 { float: left;
  68. width: 162px;
  69. margin-right: 2px;
  70. }
  71. #menu ul li a {display: block;
  72. text-decoration: none;
  73. color: #fff;
  74. background-color: #399;
  75. border: solid 1px #fff;
  76. padding: 8px;
  77. position: relative;
  78. }
  79. #menu ul li:hover {position: relative;
  80. }
  81. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
  82. color: #000;
  83. position: relative;
  84. }
  85. #menu ul li a.nivel1 {display: block!important;display: none;
  86. position: relative;
  87. }
  88. #menu ul li ul {display: none;
  89. }
  90. #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
  91. position: absolute;left: 0px;
  92. }
  93. #menu ul li ul li a {width: 160px;
  94. padding: 6px 0px 8px 0px;
  95. border-top-color: #000;
  96. }
  97. #menu ul li ul li a:hover {border-top-color: #000;
  98. position: relative;
  99. }
  100.  
  101.  
  102. /*Submenu*/
  103.  
  104. /* .menu{
  105.     border:none;
  106.     border:0px;
  107.     margin:50px;
  108.     padding:0px;
  109.     font: 100% "comic sans MS";
  110.     font-size:18px;
  111.     font-weight:bold;
  112.     }
  113.     
  114. .menu ul{
  115.     background:none bottom left no-repeat;
  116.     height:35px;
  117.     list-style:none;
  118.     margin:0;
  119.     padding:0;
  120.     }
  121.     .menu li{
  122.         float:left;
  123.         padding:0px;
  124.         }
  125.  
  126.     .menu li a{
  127.         background:none bottom right no-repeat;
  128.         color:#000000;
  129.         display:block;
  130.         font-weight:normal;
  131.         line-height:35px;
  132.         margin:0px;
  133.         padding:0px 25px;
  134.         text-align:center;
  135.         text-decoration:none;
  136.         }
  137.         .menu li a:hover, .menu ul li:hover a{
  138.             background: none bottom center no-repeat;
  139.             color:#000000;
  140.             text-decoration:none;
  141.             }
  142.     .menu li ul{
  143.         background: #5dc4b8;
  144.         display:none;
  145.         height:auto;
  146.         padding:0px;
  147.         margin:0px;
  148.         border:0px;
  149.         position:absolute;
  150.         width:150px;
  151.         z-index:200;
  152.         /*top:1em;
  153.         /*left:0;*/
  154. /*      }
  155.         
  156.     .menu li:hover ul{
  157.         display:block;
  158.         
  159.         }
  160.     .menu li li {
  161.         background:none bottom left no-repeat;
  162.         display:block;
  163.         float:none;
  164.         margin:0px;
  165.         padding:0px;
  166.         width:150px;
  167.         }
  168.     .menu li:hover li a{
  169.         background:none;
  170.         
  171.         }
  172.     .menu li ul a{
  173.         display:block;
  174.         height:35px;
  175.         font-size:12px;
  176.         font-style:normal;
  177.         margin:0px;
  178.         padding:0px 10px 0px 15px;
  179.         text-align:left;
  180.         }
  181.         .menu li ul a:hover, .menu li ul li:hover a{
  182.             background: #c9f1ec center left no-repeat;
  183.             border:0px;
  184.             color:#010000;
  185.             text-decoration:none;
  186.             }
  187.     .menu p{
  188.         clear:left;
  189.         }
  190. */


Espero que esto te sirva,

Saludos,
Gabriel.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.