Foros del Web » Creando para Internet » CSS »

Problemas con IE de Menu superior desplegable

Estas en el tema de Problemas con IE de Menu superior desplegable en el foro de CSS en Foros del Web. Estimados he realizo un menu desplegable horizontal con css y no me funciona en IE se ve todo desodenado, y no se los desplegables , ...
  #1 (permalink)  
Antiguo 12/08/2009, 14:05
Avatar de jakuam  
Fecha de Ingreso: abril-2007
Mensajes: 354
Antigüedad: 10 años, 7 meses
Puntos: 0
Problemas con IE de Menu superior desplegable

Estimados he realizo un menu desplegable horizontal con css y no me funciona en IE se ve todo desodenado, y no se los desplegables , pero si en firefox por favor ayuda..

les dejo los codigo

codigo CSS
Código:
        #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; z-index:300;font-weight:bold }
        #menu a { color:#fff; text-decoration:none;  }
        #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
        #menu > li a:hover {	color:#999;}
        #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
        /* sub-menus*/
        #menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #menu li ul {
	position:absolute;
	left:-10px;
	top:0px;
	margin-top:45px;
	width:150px;
	line-height:16px;
	background-color:#172322;
	color:#F00; /* for IE */
	display:none;
}
        #menu li:hover ul { display:block;}
        #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
        #menu li ul li:first-child { border-top: none; }
        #menu li ul li a {
	display:block;
	color:#FFF;
}
        #menu li ul li a:hover {
	color:#F00;
}
        /* main submenu */
        #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:250;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
        #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #menu .corner_left { position:absolute; left:0px; top:0px;}
        #menu .corner_right { position:absolute; left:132px; top:0px;}
        #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
codigo html
Código HTML:
<div> <ul id="menu">
                 <li>Home</li>
               
           <li><a href="#">General</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">Info General</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                  <li><a href="#">Vinos y Bodegas</a></li>
                  <li><a href="#">Eventos</a></li>
                  <li><a href="#">Exposiciones</a></li>
                  <li><a href="#">Vinos y Bodegas</a></li>
                  <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
          </li>
           <li><a href="#">Sericios Turisticos</a>
             <ul id="2">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">Hoteleria</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Gastronomia</a></li>
                     <li><a href="#">Agencias</a></li>
                    <li><a href="#">Cruceros</a></li>
                    <li><a href="#">Aereas</a></li>
                    <li><a href="#">Rent a Car</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
             </ul></li>
           
            <li><a href="#">Destinos</a>
                <ul id="3">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">Nacionales</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                  <li><a href="#">Internacionales</a></li>
                  <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
           </li>
           <li><a href="#">Actualidad</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">General help</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                  <li><a href="#">Posts</a></li>
                  <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
           <li ><img src="imagenes/lineanegra.jpg" width="100" height="5" /> Hoy es Miercoles 20 de diciembre</li>
            <li class="searchContainer">
                <div>
                <input type="text" id="searchField" />
                <img src="magnifier.png" alt="Search" onclick="alert('You clicked on search button')" /></div>
                <ul id="search">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <input id="cbxAll" type="checkbox" />All
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                <li><input id="Articles" type="checkbox" />Articles</li>
                <li><input id="Tutorials" type="checkbox" />Tutorials</li>
                <li><input id="Reviews" type="checkbox" />Reviews</li>
                <li><input id="Resources" type="checkbox" />Resources</li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
        </ul>
        <img style="float:left;" alt="" src="menu_right.png"/>
    </div> 
espero sus comentarios.. saludos
__________________
Jakuam
Reserva Hoteles Online
Turismo San Rafael Mendoza
  #2 (permalink)  
Antiguo 12/08/2009, 14:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con IE de Menu superior desplegable

¿ie? ¿qué versión?
Si te refieres a ie6, la razón se ha comentado reiteradamente en estos foros: sólo admite la pseudoclase :hover en los enlaces (a).

Si quieres un menú compatible "sólo css", basta con que pases por las faq´s. Tienes un montón de enlaces, a destacar los publicados por Mikmoro.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 12/08/2009, 19:43
 
Fecha de Ingreso: diciembre-2008
Mensajes: 56
Antigüedad: 9 años
Puntos: 1
Respuesta: Problemas con IE de Menu superior desplegable

O siempre puedes usar un poco de js, que tienes millones de menus desplegables si googleas un poco
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:37.