Hi !
Los CSS me traen loco... Tengo un menú que actualmente funciona en Firefox y en Opera (pero no en nuestro querido amigo IE 6 ni IE 7 - Aunque en este ultimo por lo menos se despliega xD -).
Les paso a mostrar los CSS:
Código HTML:
div#menu {
margin-top:32px;
}
div#menu ul {
padding:0;
margin:0;
list-style:none;
font-family:"Trebuchet MS", Verdana, Arial;
font-size:12px;
text-transform:uppercase;
color:#666666;
font-weight:bold;
z-index:5000 !important;
}
div#menu li {
float:left;
position:relative;
top:0;
left:0;
background-image:url(../images/menu_a.gif);
background-repeat:no-repeat;
background-position:left;
width:102px;
height:54px;
text-align:center;
line-height:54px;
}
div#menu li a{
color:#666666;
text-decoration:none;
}
div#menu li#main_menu:hover {/**/
float:left;
position:relative;
top:0;
left:0;
background-image:url(../images/menu_b.gif);
background-repeat:no-repeat;
background-position:left;
width:102px;
height:54px;
text-align:center;
line-height:54px;
}
/* ----------------------------- */
/* <li>
/* ----------------------------- */
div#menu li ul {
display:none;
position:absolute;
top:4.5em;
left:0;
}
<!--[if IE 7]>
div#menu li ul {
display:none;
position:relative;
}
<![endif]-->
div#menu li>ul {
top:auto;
left:auto;
}
div#menu li:hover ul, li.over ul {
display:block;
}
div#menu li ul li {
width:98px;
height:36px;/**/
font-size:12px;
text-transform:capitalize;
color:#333333;/**/
text-align:right;
background-image:none;
border-top:solid 1px #999999;
background-color:#F3F3F3;
line-height:36px;/**/
opacity: .9;
filter: alpha(opacity = 90);
}
div#menu li ul li a{
color:#333333;/**/
text-decoration:none;
/*padding-right:7px;*/
padding:0 7px 0 0;
display:block;
width:91px;
height:30px;
background-color:#F3F3F3;
}
div#menu li ul li a:hover{
color:#00A0D8;
outline:none;
}
/* ----------------------------- */
/* Clases
/* ----------------------------- */
div#menu .mitadLine {
line-height:18px;
}
div#menu .activeButton {
background-image:url(../images/menu_b.gif);
}
/* ----------------------------- */
/* 3° Nivel
/* ----------------------------- */
div#menu li ul li ul{
display:none !important;
position:absolute;
top:0px;/**/
left:8.3em;
border-collapse:collapse;
}
div#menu li ul li ul li{
background-image:none;
border-top:solid 1px #999999;
background-color:#F3F3F3;
}
div#menu li ul li ul li a{
color:#333333;/**/
text-decoration:none;
display:block;
width:91px;/**/
height:30px;
padding-right:7px;/**/
background-color:#F3F3F3;
}
div#menu li ul li:hover ul, li ul li.over ul {
display:block !important;
outline:none;
}
Perdón la Longitud >_<... Ahora les muestro el HTML:
Código HTML:
<ul id="menu_tabs">
<li id="main_menu">Products
<ul id="menu_interno">
<li style="border-top:none;"><a href="javascript:;">X-Trim</a>
<ul id="sub_menu_3">
<li style="border-top:none;"><a href="index.php?page_name=xtrim-xtrim">X-Trim</a></li>
<li><a href="index.php?page_name=xtrim-retrim">Re-Trim</a></li>
</ul>
</li>
<li><a href="index.php?page_name=splan-aps">S-Plan</a></li>
<!--<li><a href="#">D-Opt</a></li>-->
<li class="mitadLine"><a href="index.php?page_name=roll-stock-optimizer">Roll Stock Optimizer</a></li>
<li><a href="index.php?page_name=technology">Technology</a></li>
<li><a href="index.php?page_name=cpfr-collaborative-planning">CPFR</a></li>
</ul>
</li>
<li id="main_menu">Company
<ul>
<li style="border-top:none;"><a href="#">About Us</a>
<ul id="sub_menu_3">
<li class="mitadLine" style="border-top:none;"><a href="../pages/_greycon_about_us_directors.html">Board of Directors</a></li>
<li class="mitadLine"><a href="../pages/_greycon_about_us_excecutive_management_team.html">Management Team</a></li>
<li><a href="index.php?page_name=company-about-us-history">Brief History</a></li>
</ul>
</li>
<li><a href="../pages/_greycon_company_news.html">News</a></li>
<li><a href="greycon-feedback.php">FeedBack</a></li>
<li><a href="greycon-contact-us.php">Contact Us</a></li>
<li><a href="index.php?page_name=recruitment">Careers</a></li>
</ul>
</li>
<li id="main_menu">Industries
<ul>
<li style="border-top:none;"><a href="index.php?page_name=paper-industry">Paper</a></li>
<li><a href="index.php?page_name=film-and-plastic-industries">Film & Plastics</a></li>
<li><a href="index.php?page_name=converting-industry">Converting</a></li>
<li><a href="javascript:;">Other Industries</a>
<ul id="sub_menu_3">
<li style="border-top:none;"><a href="index.php?page_name=textile-industry">Textiles</a></li>
<li><a href="index.php?page_name=metals-industry">Metals</a></li>
<li><a href="index.php?page_name=printing-Industry">Printing</a></li>
</ul>
</li>
</ul>
<li id="main_menu"><a href="index.php?page_name=services">Services</a></li>
<li id="main_menu">Clients</li>
<li id="main_menu">Partners</li>
</ul>
</div>
La cosa es (como dije antes) que en IE 6 ni se muestra...
U... Me vendria bien que me dieran un mano con esto.
Desde ya, gracias!
-ByE-