Hola, FdW
Estoy armando un menu CSS pero IE 7 no me anda bien, anda en todos menos en IE 7, el problema es que interpone los menues uno sobre otro, y despues deforma todo...
Miren, les dejo el codigo:
Código:
<style type="text/css">
#menu {
width: 180px; /* set width of menu */
}
#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}
/* style, color and size links and headings to suit */
#menu a {
font: bold 13px Verdana, helvetica, sans-serif;
display: block;
float: left;
text-align: left;
width: 130px;
height: 28px;
margin: 10px 0 0 25px;
color: #000;
text-decoration: none;
font-weight: bold;
outline: none;
}
#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
div#menu ul ul ul ul { display: block; }
div#menu ul ul li:hover ul { display: block; }
div#menu ul ul li {
width: 180px;
height: 39px;
margin: 0;
padding: 0;
}
div#menu ul ul li:hover {
width: 180px;
height: 39px;
}
div#menu ul ul li.selected {
width: 180px;
height: 39px;
}
div#menu ul ul li a.zerowaste_link {
text-indent: -10000px; display: block; margin: 0;
width: 180px;
height: 50px;
}
div#menu ul ul li a:hover.zerowaste_link {
text-indent: -10000px; display: block; margin: 0;
width: 180px;
height: 50px;
}
div#menu ul ul ul li {
margin: 0;
padding: 0;
background: #a7c3ee;
width: 180px;
height: 38px;
border-bottom: 1px solid #bdd2f2;
}
div#menu ul ul ul li:hover {
background: #88a7e1;
width: 180px;
height: 38px;
}
div#menu ul ul ul li.selected {
background: #88a7e1;
width: 180px;
height: 38px;
}
div#menu ul ul ul li a {
margin: 0;
clear: both;
font-size: 11px;
width: 152px;
padding: 5px 0 0 10px;
line-height: 14px;
font-weight: normal;
}
div#menu ul ul ul ul li {
background: #FFCC00;
width: 180px;
height: 39px;
margin: 0;
padding: 0;
border-bottom: 1px solid #ffd759;
}
div#menu ul ul ul ul li:hover {
background: #F1C100;
width: 180px;
height: 39px;
}
div#menu ul ul ul li {
margin: 0;
padding: 0;
background: #a7c3ee;
width: 180px;
height: 38px;
border-bottom: 1px solid #bdd2f2;
}
div#menu ul ul ul li:hover {
background: #88a7e1;
width: 180px;
height: 38px;
}
div#menu ul ul ul li.selected {
background: #88a7e1;
width: 180px;
height: 38px;
}
div#menu ul ul ul li a {
margin: 0;
clear: both;
font-size: 11px;
width: 152px;
padding: 5px 0 0 10px;
line-height: 14px;
font-weight: normal;
}
-->
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
font-size: 13px;
margin-left: 13px;
font-weight: bold;
}
div#menu ul ul ul li a {
font-size: 11px;
font-weight: normal;
}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
.zerowaste_link {background-image: url('images/zerowaste_off.jpg'); width: 180px; height: 50px; text-indent: -10000px; display: block; margin: 0;
}
ul li a.zerowaste_link:hover ul { display:block; }
</style>
<![endif]-->
<div id="menu">
<ul>
<li>
<ul>
<li style="margin: 0; height: 50px;"><a href="javascript:;" id="zerowaste_linkk" title="Zero Waste" class="zerowaste_link">Zero Waste</a>
<ul id="menu_ul">
<li><a href="whatszerowaste.php" title="">What's Zero Waste?</a></li>
<li><a href="javascript:;" title="">Residents</a>
<ul>
<li><a href="howtobeasmartconsumer.php" title="">How to be a Smart Consumer</a></li>
<li><a href="howtocompost.php" title="">How to Compost</a></li>
<li><a href="howtodisposezerowasteway.php" title="">How to Dispose of Items the Zero Waste Way</a></li>
</ul>
</li>
<li><a href="javascript:;" title="">Businesses</a>
<ul>
<li><a href="bussiness_contractorsbuilders.php" title="">Contractors & Builders</a></li>
<li><a href="bussiness_manufacturers.php" title="">Manufacturers</a></li>
<li><a href="bussiness_offices.php" title="">Offices</a></li>
<li><a href="bussines_restaurantsfood.php" title="">Restaurants & Food Services</a></li>
</ul></li>
</ul>
</li>
<!-- END ZERO WASTE -->
</ul>
<ul>
<li><a href="javascript:none" title="">Homeowners</a>
<ul>
<li><a href="homeowner_household.php" title="">Household Hazardous Materials - Use and Disposal</a></li>
<li><a href="homeowner_rrr.php" title="">Reduce, Reuse, Recycle</a></li>
<li><a href="homeowner_energy.php" title="">Energy Saving Home Upgrades</a></li>
<li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
<li><a href="homeowner_energy_saving_tips.php" title="">Easy and Free Energy Saving Tips</a></li>
<li><a href="homeowner_tips_for_clean.php" title="">Tips for a Clean & Litter Free Community</a></li>
<li><a href="homeowner_contact.php" title="">Contact Information for Local Utility Companies</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="javascript:none" title="">Multi-Units</a>
<ul>
<li><a href="multiunit_household.php" title="">Household Hazardous Materials - Use and Disposal</a></li>
<li><a href="multiunit_rrr.php" title="">Reduce, Reuse, Recycle</a></li>
<li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
<li><a href="multiunit_energy_saving_tips.php" title="">Easy and Free Energy Saving Tips</a></li>
<li><a href="multiunit_tips_for_clean.php" title="">Tips for a Clean & Litter Free Community</a></li>
<li><a href="multiunit_contact.php" title="">Contact Information for Local Utility Companies</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="javascript:none" title="">Developers</a>
<ul>
<li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
<li><a href="developers_construction_demolition.php" title="">Construction & Demolition Materials</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="javascript:none" title="">Schools</a>
<ul>
<li><a href="school_enviromental.php" title="">Environmental Lesson Plans</a></li>
<li><a href="school_organize.php" title="">Organize a School Clean-Up</a></li>
<li><a href="school_start.php" title="">Start a Recycling Program</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="javascript:none" title="">Businesses</a>
<ul>
<li><a href="businesses_rrr.php" title="">Reduce, Reuse, Recycle</a></li>
<li><a href="businesses_start.php" title="">Start a Recycling Program</a></li>
<li><a href="businesses_energy_saving.php" title="">Energy Saving Tips</a></li>
<li><a href="http://www.calgold.ca.gov/" title="" target="_blank">Required Business Permits</a></li>
<li><a href="green_build.html" title="">Irvine's Green Building Program</a></li>
</ul>
</li>
</ul> </li>
</ul>
</div>
La verdad, que lo encuentro solucion...