Tema: Problema con menu desplegable
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 10/02/2011, 22:13
Avatar de sanxuan
sanxuan
 
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Problema con menu desplegable
He hecho algunas pruebas y ésta por ejemplo funciona bien en IE8.
Faltan algunos ajustes en los desplegables para que se vea bien.
Pruébala en IE6 y en IE7.
Espero que la puedas adaptar a tu página.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title> titulo </title>
  5. <style type="text/css">
  6. *{
  7.   margin:0;
  8.   padding:0;
  9. }
  10. #navegacion {
  11.   background-color:white ;
  12.   height:40px ;
  13.   border-bottom:gray 2px solid ;
  14.   border-right: black 1px solid ;
  15.   border-left:black 1px solid }
  16. #menu {
  17.   text-align: center;
  18.   font-size: 1em;
  19.   width: 820px;
  20.   margin: 0px auto;
  21. }
  22. #menu ul {
  23.   list-style-type: none;
  24. }
  25. #menu ul li {
  26.   width: 162px;
  27. }
  28. #menu ul li.nivel1 {
  29.   float: left;
  30.   margin-right: 1px;
  31. }
  32. #menu ul li a {
  33.   display: block;
  34.   text-decoration: none;
  35.   color: #fff;
  36.   background-color: #2F4F4F;
  37.   border: solid 1px #fff;
  38.   padding: 8px 0;
  39.   position: relative;
  40. }
  41. #menu ul li a.nivel2 {
  42.   color: #000;
  43. }
  44. #menu ul li a.nivel2 {
  45.   display: none;
  46.   position: relative;
  47. }
  48. #menu ul li:hover {
  49.   position: relative;
  50. }
  51. #menu ul li a:hover{
  52.   background-color: black;
  53.   color: red;
  54. }
  55. #menu ul li ul {
  56.   display: none;
  57. }
  58. #menu ul li:hover ul.nivel2{
  59.   display: block;
  60.   position: absolute;
  61.   left: 0px;
  62. }
  63. #menu ul li ul li a {
  64.   width: 160px;
  65. }
  66. #menu ul li a.nivel1{
  67.   display:none
  68. }
  69.  
  70. </style>
  71. </head>
  72. <body>
  73. <div id="navegacion">
  74.  
  75. <div id="menu">
  76. <ul>
  77. <li class="nivel1"><a href="fiestas/fiestas.html" class="nivel1">Fiestas</a>
  78. <!--[if IE]><a href="fiestas/fiestas.html" class="nivel1ie">Fiestas<table class="falsa"><tr><td><![endif]-->
  79. <ul class="nivel2">
  80. <li><a href="#">Fiestas 2</a></li>
  81. <li><a href="#">Fiestas 3</a></li>
  82. </ul>
  83. <!--[if IE]></td></tr></table></a><![endif]-->
  84. </li>
  85. <li class="nivel1"><a href="ferias/ferias.html" class="nivel1">Ferias</a>
  86. <!--[if IE ]><a href="ferias/ferias.html" class="nivel1ie">Ferias<table class="falsa"><tr><td><![endif]-->
  87. <ul class="nivel2">
  88. <li><a href="#">Ferias 2</a></li>
  89. <li><a href="#">Ferias 3</a></li>
  90.  
  91. <!--[if IE]><table class="falsa"><tr><td><![endif]-->
  92.  
  93. <!--[if IE]></td></tr></table></a><![endif]-->
  94.  
  95. </ul>
  96. <!--[if IE]></td></tr></table></a><![endif]-->
  97. </li>
  98. <li class="nivel1"><a href="teatro/teatro.html" class="nivel1">Teatro</a>
  99. <!--[if IE]><a href="teatro/teatro.html" class="nivel1ie">Teatro<table class="falsa"><tr><td><![endif]-->
  100. <ul class="nivel2">
  101. <li><a href="#">Teatro 2</a></li>
  102. <li><a href="#">Teatro 3</a></li>
  103.  
  104. </ul>
  105. <!--[if IE]></td></tr></table></a><![endif]-->
  106. </li>
  107. <li class="nivel1"><a href="musica/musica.html" class="nivel1">Musica</a>
  108. <!--[if IE]><a href="musica/musica.html" class="nivel1ie">Musica<table class="falsa"><tr><td><![endif]-->
  109. <ul class="nivel2">
  110. <li><a href="musica/musica2.html">Musica 2</a></li>
  111. <li><a href="#">Musica 3</a></li>
  112. <li><a href="#">Musica 4</a></li>
  113. <li><a href="#">Musica 5</a></li>
  114. </ul>
  115. <!--[if IE]></td></tr></table></a><![endif]-->
  116. </li>
  117. <li class="nivel1"><a href="contraportada/contraportada.html" class="nivel1">Contraportada</a>
  118. <!--[if IE]><a href="contraportada/contraportada.html" class="nivel1ie">Contraportada<table class="falsa"><tr><td><![endif]-->
  119.  
  120. <!--[if IE]></td></tr></table></a><![endif]-->
  121. </li>
  122. </ul>
  123. </div>
  124.  
  125. </div>
  126. </body>
  127. </html>