Tema: Menu no es compatible con Explorer8
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/06/2012, 14:49
Avatar de sarumanice
sarumanice
 
Fecha de Ingreso: mayo-2008
Ubicación: Lima, Peru
Mensajes: 103
Antigüedad: 16 años, 7 meses
Puntos: 4
Menu no es compatible con Explorer8
Buenas tardes a todos, acabo de encontrar un menu con CSS el cual no es compatible con Explorer8, que podria modificar para poder hacer q sea compatible con este navegador?

Código CSS: 
Ver original
  1. #menu1 {
  2. margin : 5px auto 260px !important ;
  3. }
  4. #menu1 {
  5. font-family : Arial, sans-serif;
  6. font-size : 12px;
  7. background-color : #202020;
  8. width : 920px;
  9. height : 40px;
  10. border-radius : 5px;
  11. margin : 40px auto 0;
  12. padding : 0 20px;
  13. display : block;
  14. line-height : 1;
  15. }
  16. #menu1 h1, #menu1 ul, #menu1 p, #menu1 img {
  17. margin : 0;
  18. padding : 0;
  19. border : 0;
  20. }
  21. #menu1 h1 {
  22. font-weight : normal;
  23. }
  24. #menu1 ul {
  25. list-style : none;
  26. }
  27. #menu1 a {
  28. text-decoration : none;
  29. color : #d0d0d0;
  30. }
  31. #menu1 .menu-label {
  32. font-weight : bold;
  33. text-transform : uppercase;
  34. }
  35. #menu1 .menu-top > li {
  36. float : left;
  37. position : relative;
  38. text-align : center;
  39. }
  40. #menu1 .menu-top > li:hover {
  41. background-color : #4a4a4a;
  42. }
  43. #menu1 .menu-top .menu-right {
  44. float : right;
  45. }
  46. #menu1 .menu-button {
  47. display : block;
  48. line-height : 40px;
  49. padding : 0 20px;
  50. color : #d0d0d0;
  51. }
  52. #menu1 li:hover .menu-button {
  53. color : #fff;
  54. }
  55. #menu1 .menu-drop {
  56. padding-right : 15px;
  57. }
  58. #menu1 .menu-drop .menu-label {
  59. padding-right : 20px;
  60. background : url("../images/menu1-drop1.png") right no-repeat;
  61. }
  62. #menu1 li:hover .menu-drop .menu-label {
  63. background : url("../images/menu1-drop2.png") right no-repeat;
  64. }
  65. #menu1 .menu-dropdown {
  66. text-align : left;
  67. background-color : #4a4a4a;
  68. border-radius : 0 0 5px 5px;
  69. position : absolute;
  70. left : -5000px;
  71. opacity : 0;
  72. z-index : 100;
  73. }
  74. #menu1 li:hover .menu-dropdown {
  75. left : 0;
  76. opacity : 1;
  77. }
  78. #menu1 .menu-right:hover .menu-dropdown {
  79. left : auto;
  80. right : 0;
  81. }
  82. #menu1 .menu-sub {
  83. margin : 5px 0;
  84. }
  85. #menu1 .menu-sub li {
  86. white-space : nowrap;
  87. }
  88. #menu1 .menu-sub li:hover {
  89. background : url("../images/menu1-select.png") 10px no-repeat #2a2a2a;
  90. }
  91. #menu1 .menu-subbutton {
  92. display : block;
  93. padding : 7px 20px;
  94. line-height : 1.3;
  95. color : #d0d0d0;
  96. }
  97. #menu1 .menu-sub li:hover .menu-subbutton {
  98. color : #fff;
  99. }
  100. #menu1 .menu-desc {
  101. font-style : italic;
  102. color : #a0a0a0;
  103. }
  104. #menu1 .menu-sub li:hover .menu-desc {
  105. color : #d0d0d0;
  106. }
  107. #menu1 .menu-row .menu-sub {
  108. margin : 0;
  109. }
  110. #menu1 h1 {
  111. font-size : 2em;
  112. color : #a0a0a0;
  113. }
  114. #menu1 p {
  115. color : #e5e5e5;
  116. }
  117. #menu1 .emp {
  118. font-weight : bold;
  119. }
  120. #menu1 .quote {
  121. font-style : italic;
  122. }
  123. #menu1 .menu-dropdown3 {
  124. padding-top : 5px;
  125. white-space : nowrap;
  126. }
  127. #menu1 .menu-dropdown3 h1 {
  128. margin : 0 0 5px 20px;
  129. }
  130. #menu1 .menu-dropdown3 .menu-row {
  131. border-right : 1px dotted #707070;
  132. margin : 5px 0;
  133. }
  134. #menu1 .menu-dropdown3 .menu-row:last-child {
  135. border-right : none;
  136. }
  137. #menu1 .menu-dropdown4 {
  138. padding-top : 5px;
  139. white-space : nowrap;
  140. }
  141. #menu1 .menu-dropdown4 h1 {
  142. margin : 0 0 5px 20px;
  143. }
  144. #menu1 .menu-dropdown4 .menu-row div {
  145. border-right : 1px dotted #707070;
  146. margin : 5px 0 10px 0;
  147. }
  148. #menu1 .menu-dropdown4 .menu-row:last-child div {
  149. border-right : none;
  150. }
  151. #menu1 .menu-dropdown4 .menu-row div:last-child {
  152. margin-bottom : 5px;
  153. }
  154. #menu1 .menu-dropdown6 img {
  155. margin-right : 5px;
  156. vertical-align : middle;
  157. }
  158. #menu1 .menu-dropdown6 .menu-label {
  159. vertical-align : middle;
  160. }
  161. #menu1 .menu-dropdown6 .menu-subbutton {
  162. padding : 5px 20px;
  163. }
  164. #menu1 .menu-dropdown7 {
  165. padding : 10px;
  166. width : 210px;
  167. }
  168. #menu1 .menu-dropdown7 p {
  169. margin-top : 7px;
  170. }
  171. #menu1 .menu-dropdown7 h1 {
  172. color : #e0e0e0;
  173. padding-bottom : 3px;
  174. border-bottom : 1px solid #858585;
  175. }

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Modern Menu</title>
  6. <link href="css/main.css" type="text/css" rel="stylesheet">
  7. <!--[if lt IE 9]>
  8. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
  9. </script>
  10. <![endif]-->
  11. </head>
  12. <body>
  13.     <nav id="menu1">
  14.         <ul class="menu-top">
  15.             <li><a href="#" class="menu-button"><span class="menu-label">Home</span></a></li>
  16.             <li><a href="#" class="menu-button menu-drop"><span class="menu-label">About</span></a>
  17.                 <div class="menu-dropdown menu-dropdown1">
  18.                     <ul class="menu-sub">
  19.                         <li><a href="#" class="menu-subbutton"><span class="menu-label">Who We Are</span></a></li>
  20.                         <li><a href="#" class="menu-subbutton"><span class="menu-label">What We Do</span></a></li>
  21.                         <li><a href="#" class="menu-subbutton"><span class="menu-label">Our Goals</span></a></li>
  22.                         <li><a href="#" class="menu-subbutton"><span class="menu-label">Our Awards</span></a></li>
  23.                         <li><a href="#" class="menu-subbutton"><span class="menu-label">Our Team</span></a></li>
  24.                     </ul>
  25.                 </div>
  26.             </li>
  27.             <li><a href="#" class="menu-button menu-drop"><span class="menu-label">Services</span></a>
  28.                 <div class="menu-dropdown menu-dropdown2">
  29.                     <ul class="menu-sub">
  30.                             <li><a href="#" class="menu-subbutton"><span class="menu-label">Web Design</span><div class="menu-desc">Lorem ipsum dolor</div></a></li>
  31.                             <li><a href="#" class="menu-subbutton"><span class="menu-label">Programming</span><div class="menu-desc">Lorem ipsum dolor</div></a></li>
  32.                             <li><a href="#" class="menu-subbutton"><span class="menu-label">Advertising</span><div class="menu-desc">Lorem ipsum dolor</div></a></li>
  33.                             <li><a href="#" class="menu-subbutton"><span class="menu-label">Marketing</span><div class="menu-desc">Lorem ipsum dolor</div></a></li>
  34.                             <li><a href="#" class="menu-subbutton"><span class="menu-label">E-commerce</span><div class="menu-desc">Lorem ipsum dolor</div></a></li>
  35.                     </ul>
  36.                 </div>
  37.             </li>
  38.             <li class="menu-right">
  39.                 <a href="#" class="menu-button menu-drop"><span class="menu-label">Info</span></a>
  40.             </li>
  41.             <li class="menu-right"><a href="#" class="menu-button menu-drop"><span class="menu-label">Social</span></a>
  42.                 <div class="menu-dropdown menu-dropdown6">
  43.                     <ul class="menu-sub">
  44.                         <li><a href="#" class="menu-subbutton"><img src="images/facebook.png" alt=""><span class="menu-label">Facebook</span></a></li>
  45.                         <li><a href="#" class="menu-subbutton"><img src="images/twitter.png" alt=""><span class="menu-label">Twitter</span></a></li>
  46.                         <li><a href="#" class="menu-subbutton"><img src="images/googleplus.png" alt=""><span class="menu-label">Google+</span></a></li>
  47.                         <li><a href="#" class="menu-subbutton"><img src="images/linkedin.png" alt=""><span class="menu-label">LinkedIn</span></a></li>
  48.                     </ul>
  49.                 </div>
  50.             </li>
  51.         </ul>
  52.     </nav>
  53. </body>
  54.     <!-- Mirrored from www.creativetier.com/products/modern-menu/ by HTTrack Website Copier/3.x [XR&CO'2010], Fri, 11 May 2012 10:19:23 GMT -->
  55. </html>