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