troubleshooting Question

Drop Down Menu won't fire in IE 6

Avatar of bsowards
bsowards asked on
Fonts TypographyCSS
3 Comments1 Solution321 ViewsLast Modified:
Hi all,

I have a beautifully working CSS menu in Firefox/Safari that doesn't work in IE6. 500 pts to the pro that can get it working:

Page: http://www.vitreumstudios.com/testcssmenu.html

Code:

<html>
<head>
<title>test css menu</title>

<style type="text/css">
/* common styling */
.menu {
    font-family: arial, sans-serif;
    width:775px; position:relative;
    margin:0;
    font-size:11px;
    margin:2px 0 100px 0;
    z-index:100;
    }
.menu ul #home a {
    display:block;
    text-decoration:none;
    color:#000;
    width:57px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/homeoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul #aboutus a {
    display:block;
    text-decoration:none;
    color:#000;
    width:76px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/aboutusoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul #managementconsulting a {
    display:block;
    text-decoration:none;
    color:#000;
    width:170px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/managementoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul #marketresearchreports a {
    display:block;
    text-decoration:none;
    color:#000;
    width:182px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/marketresearchoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul #industries a {
    display:block;
    text-decoration:none;
    color:#000;
    width:88px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/industriesoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul #news a {
    display:block;
    text-decoration:none;
    color:#000;
    width:110px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/newsoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul #contactus a {
    display:block;
    text-decoration:none;
    color:#000;
    width:92px;
    height:22px;
    text-align:center;
    color:#fff;
    border:0px;
    background-image: url('images/contactusoff.gif');
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
.menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
    }
.menu ul li {
    float:left;
     margin-right:0;
     position:relative;
     }
.menu ul li ul {
    display: none;
    }
   
.menu ul #contactus .item a, .menu ul #news .item a, .menu ul #industries .item a, .menu ul #marketresearchreports .item a, .menu ul #managementconsulting .item a, .menu ul #aboutus .item a, .menu ul #home .item a {
    display:block;
    text-decoration:none;
    color:#000;
    height:26px;
    text-align:left;
    color:#333;
    border:0;
    background-color:#fff;
    background-image:none;
    line-height:20px;
    font-size:11px;
    overflow:hidden;
    }
   
.menu ul #contactus ul, .menu ul #news ul, .menu ul #industries ul, .menu ul #marketresearchreports ul, .menu ul #managementconsulting ul, .menu ul #aboutus ul, .menu ul #home ul {
    border: 1px solid #000;
    }

/* specific to non IE browsers */
.menu .mainnav #home:hover a {
    background-image: url('images/homeon.gif');
    }
   
.menu .mainnav #aboutus:hover a {
    background-image: url('images/aboutuson.gif');
    }  
.menu .mainnav #aboutus:hover .subnav{
    display:block;
    position:absolute;
    top:21px;
    width:167px;
    padding:0;
    text-align:left;
    left:0;
    }
.menu .mainnav #aboutus:hover .subnav .item a {
    width:127px;
    padding:8px 20px 0 20px;
    background-image: none;
    }
.menu .mainnav #aboutus:hover .subnav .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #aboutus:hover .subnav #last a {
    border-bottom: 2px solid #000;
    }  
.menu .mainnav #aboutus:hover .subnav #last .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #aboutus:hover .subnav #last #last a {
    border-bottom: 2px solid #000;
    }
.menu .mainnav #aboutus:hover .subnav .item a:hover {
    background:#c5e1b1;
    color:#000;
    }
.menu .mainnav #aboutus:hover .subnav li:hover .subsubnav {
    display:block;
    width:220px;
    position:absolute;
    left:167px;
    top:0;
    }  
.menu .mainnav #aboutus:hover .subnav li:hover .subsubnav .item a {
    width:180px;
    }  
.menu .mainnav #aboutus:hover .subnav li:hover .subsubnav li:hover .subsubsubnav {
    display:block;
    position:absolute;
    left:220px;
    width:180px;
    top:0;
}
.menu .mainnav #aboutus:hover .subnav li:hover .subsubnav li:hover .subsubsubnav .item a {
    width:140px;
}

   
.menu .mainnav #managementconsulting:hover a {
    background-image: url('images/managementon.gif');
    }
.menu .mainnav #managementconsulting:hover .subnav{
    display:block;
    position:absolute;
    top:21px;
    width:167px;
    padding:0;
    text-align:left;
    left:0;
    }
.menu .mainnav #managementconsulting:hover .subnav .item a {
    width:127px;
    padding:8px 20px 0 20px;
    background-image: none;
    }
.menu .mainnav #managementconsulting:hover .subnav .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #managementconsulting:hover .subnav #last a {
    border-bottom: 2px solid #000;
    }  
.menu .mainnav #managementconsulting:hover .subnav #last .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #managementconsulting:hover .subnav #last #last a {
    border-bottom: 2px solid #000;
    }
.menu .mainnav #managementconsulting:hover .subnav .item a:hover {
    background:#c5e1b1;
    color:#000;
    }
.menu .mainnav #managementconsulting:hover .subnav li:hover .subsubnav {
    display:block;
    width:205px;
    position:absolute;
    left:167px;
    top:0;
    }  
.menu .mainnav #managementconsulting:hover .subnav li:hover .subsubnav .item a {
    width:165px;
    }  


.menu .mainnav #marketresearchreports:hover a {
    background-image: url('images/marketresearchon.gif');
    }
.menu .mainnav #marketresearchreports:hover .subnav{
    display:block;
    position:absolute;
    top:21px;
    width:167px;
    padding:0;
    text-align:left;
    left:0;
    }
.menu .mainnav #marketresearchreports:hover .subnav .item a {
    width:127px;
    padding:8px 20px 0 20px;
    background-image: none;
    }
.menu .mainnav #marketresearchreports:hover .subnav .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #marketresearchreports:hover .subnav #last a {
    border-bottom: 2px solid #000;
    }  
.menu .mainnav #marketresearchreports:hover .subnav #last .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #marketresearchreports:hover .subnav #last #last a {
    border-bottom: 2px solid #000;
    }
.menu .mainnav #marketresearchreports:hover .subnav .item a:hover {
    background:#c5e1b1;
    color:#000;
    }
.menu .mainnav #marketresearchreports:hover .subnav li:hover .subsubnav {
    display:block;
    width:155px;
    position:absolute;
    left:167px;
    top:0;
    }  
.menu .mainnav #marketresearchreports:hover .subnav li:hover .subsubnav .item a {
    width:115px;
    }  


.menu .mainnav #industries:hover a {
    background-image: url('images/industrieson.gif');
    }
.menu .mainnav #industries:hover .subnav{
    display:block;
    position:absolute;
    top:21px;
    width:210px;
    padding:0;
    text-align:left;
    left:0;
    }
.menu .mainnav #industries:hover .subnav .item a {
    width:170px;
    padding:8px 20px 0 20px;
    background-image: none;
    }
.menu .mainnav #industries:hover .subnav .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #industries:hover .subnav #last a {
    border-bottom: 2px solid #000;
    }  
.menu .mainnav #industries:hover .subnav #last .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #industries:hover .subnav #last #last a {
    border-bottom: 2px solid #000;
    }
.menu .mainnav #industries:hover .subnav .item a:hover {
    background:#c5e1b1;
    color:#000;
    }
.menu .mainnav #industries:hover .subnav li:hover .subsubnav {
    display:block;
    width:177px;
    position:absolute;
    left:210px;
    top:0;
    }  
.menu .mainnav #industries:hover .subnav li:hover .subsubnav .item a {
    width:137px;
    }  


.menu .mainnav #news:hover a {
    background-image: url('images/newson.gif');
    }
.menu .mainnav #news:hover .subnav{
    display:block;
    position:absolute;
    top:21px;
    width:155px;
    padding:0;
    text-align:left;
    left:0;
    }
.menu .mainnav #news:hover .subnav .item a {
    width:115px;
    padding:8px 20px 0 20px;
    background-image: none;
    }
.menu .mainnav #news:hover .subnav .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #news:hover .subnav #last a {
    border-bottom: 2px solid #000;
    }  
.menu .mainnav #news:hover .subnav #last .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #news:hover .subnav #last #last a {
    border-bottom: 2px solid #000;
    }
.menu .mainnav #news:hover .subnav .item a:hover {
    background:#c5e1b1;
    color:#000;
    }


.menu .mainnav #contactus:hover a {
    background-image: url('images/contactuson.gif');
    }
.menu .mainnav #contactus:hover .subnav{
    display:block;
    position:absolute;
    top:21px;
    width:140px;
    padding:0;
    text-align:left;
    left:0;
    }
.menu .mainnav #contactus:hover .subnav .item a {
    width:100px;
    padding:8px 20px 0 20px;
    background-image: none;
    }
.menu .mainnav #contactus:hover .subnav .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #contactus:hover .subnav #last a {
    border-bottom: 2px solid #000;
    }  
.menu .mainnav #contactus:hover .subnav #last .item a {
    border-bottom: 1px dashed #888888;
    }
.menu .mainnav #contactus:hover .subnav #last #last a {
    border-bottom: 2px solid #000;
    }
.menu .mainnav #contactus:hover .subnav .item a:hover {
    background:#c5e1b1;
    color:#000;
    }

 


</style>

</head>

<body>
<div class="menu">
<ul class="mainnav">
<li id="home"><a href='http://www.klinegroup.com/'>&nbsp;</a></li>
<li id="aboutus"><a href='about/aboutus.asp'>&nbsp;</a>
    <ul class="subnav">

    <li class="item"><a href='about/aboutus.asp'>Corporate Overview</a></li>
    <li class="item"><a href='about/philosophy.asp'>Our Philosophy</a></li>
    <li class="item"><a href='about/clientbase.asp'>Our Client Base</a></li>
    <li class="item"><a href='clientsuccess/clientsuccess.asp'>Client Successes</a></li>
    <li class="item"><a href='about/industries.asp'>Industries We Serve &nbsp;&nbsp;&nbsp;&nbsp;>></a>
        <ul class="subsubnav">

        <li class="item"><a href='management-consulting/consulting_industries.asp'>Kline Management Consulting &nbsp;&nbsp;&nbsp;&nbsp;>></a>
            <ul class="subsubsubnav">
            <li class="item"><a href='management-consulting/consulting_chemicals.asp'>Chemicals and Materials</a></li>
            <li class="item"><a href='management-consulting/consulting_consumer.asp'>Consumer Products</a></li>
            <li class="item"><a href='management-consulting/consulting_energy.asp'>Energy</a></li>
            <li class="item"><a href='management-consulting/consulting_lifescience.asp'>Life Sciences</a></li>

            <li class="item" id="last"><a href='management-consulting/consulting_manufacturing.asp'>Downstream Manufacturing</a></li>
            </ul></li>
        <li class="item" id="last"><a href='market-research/research_industries.asp'>Kline Research &nbsp;&nbsp;&nbsp;&nbsp;>></a>
            <ul class="subsubsubnav">
            <li class="item"><a href='market-research/research_agpesticides.asp'>Ag/Specialty Pesticides</a></li>
            <li class="item"><a href='market-research/research_chemicals.asp'>Chemicals</a></li>

            <li class="item"><a href='market-research/research_consumer.asp'>Consumer Products</a></li>
            <li class="item"><a href='market-research/research_healthcare.asp'>Healthcare</a></li>
            <li class="item"><a href='market-research/research_cleaners.asp'>Industrial/Inst. Cleaners</a></li>
            <li class="item"><a href='market-research/research_petroleum.asp'>Petroleum Products</a></li>
            <li class="item" id="last"><a href='market-research/research_polymers.asp'>Polymers/Materials</a></li>
            </ul></li>

            </ul></li>
    <li class="item"><a href='profiles/employee_profiles.asp'>Management Team Profiles</a></li>
    <li class="item"><a href='careers/careers.asp'>Careers at Kline &nbsp;&nbsp;&nbsp;&nbsp;>></a>
        <ul class="subsubnav">
        <li class="item"><a href='careers/day_in_life.asp'>A Day in the Life</a></li>
        <li class="item"><a href='careers/positions.asp'>Positions Available</a></li>

        <li class="item" id="last"><a href='forms/job_app_form.asp'>Apply for a Job</a></li>
        </ul></li>
    <li class="item"><a href='about/locations.asp'>Office Locations</a></li>
    <li class="item" id="last"><a href='news/pressroom.asp'>Press Room</a></li>
    </ul></li>
<li id="managementconsulting"><a href='management-consulting/kline_consulting.asp'>&nbsp;</a>
    <ul class="subnav">
    <li class="item"><a href='management-consulting/kline_consulting.asp'>Consulting Overview</a></li>

    <li class="item"><a href='management-consulting/consulting_services.asp'>Consulting Services &nbsp;&nbsp;&nbsp;&nbsp;>></a>
        <ul class="subsubnav">
        <li class="item"><a href='management-consulting/consulting_strategy.asp'>Strategy</a></li>
        <li class="item"><a href='management-consulting/consulting_supply.asp'>Manufacturing and Supply Chain</a></li>
        <li class="item"><a href='management-consulting/consulting_mergers.asp'>Mergers & Acquisitions</a></li>
        <li class="item"><a href='management-consulting/consulting_technology.asp'>Technology</a></li>

        <li class="item"><a href='management-consulting/consulting_customer.asp'>Customer Relationships</a></li>
        </ul></li>
    <li class="item"><a href='management-consulting/consulting_industries.asp'>Industry Practices &nbsp;&nbsp;&nbsp;&nbsp;>></a>
        <ul class="subsubnav">
        <li class="item"><a href='management-consulting/consulting_chemicals.asp'>Chemicals and Materials</a></li>
        <li class="item"><a href='management-consulting/consulting_consumer.asp'>Consumer Products</a></li>

        <li class="item"><a href='management-consulting/consulting_energy.asp'>Energy</a></li>
        <li class="item"><a href='management-consulting/consulting_lifescience.asp'>Life Sciences</a></li>
        <li class="item"><a href='management-consulting/consulting_manufacturing.asp'>Downstream Manufacturingp</a></li>
        </ul></li>
    <li class="item" id="last"><a href='management-consulting/kmc_insights.asp'>Intelligent Insights</a></li>
    </ul></li>
<li id="marketresearchreports"><a href='market-research/kline_research.asp'>&nbsp;</a>

    <ul class="subnav">
    <li class="item"><a href='market-research/kline_research.asp'>Research Overview</a></li>
    <li class="item"><a href='market-research/research_industries.asp'>Industry Practices &nbsp;&nbsp;&nbsp;&nbsp;>></a>
        <ul class="subsubnav">
        <li class="item"><a href='market-research/research_agpesticides.asp'>Ag/Specialty Pesticides</a></li>
        <li class="item"><a href='market-research/research_chemicals.asp'>Chemicals</a></li>

        <li class="item"><a href='market-research/research_consumer.asp'>Consumer Products</a></li>
        <li class="item"><a href='market-research/research_healthcare.asp'>Healthcare</a></li>
        <li class="item"><a href='market-research/research_cleaners.asp'>Industrial/Inst. Cleaners</a></li>
        <li class="item"><a href='market-research/research_petroleum.asp'>Petroleum Products</a></li>
        <li class="item" id="last"><a href='market-research/research_polymers.asp'>Polymers/Materials</a></li>
        </ul></li>

    <li class="item" id="last"><a href='market-research/research_purchasing.asp'>Purchasing a Report</a></li>
    </ul></li>
<li id="industries"><a href='about/industries.asp'>&nbsp;</a>
    <ul class="subnav">
    <li class="item"><a href='management-consulting/consulting_industries.asp'>Kline Management Consulting &nbsp;&nbsp;&nbsp;&nbsp;>></a>
        <ul class="subsubnav">
        <li class="item"><a href='management-consulting/consulting_chemicals.asp'>Chemicals and Materials</a></li>

        <li class="item"><a href='management-consulting/consulting_consumer.asp'>Consumer Products</a></li>
        <li class="item"><a href='management-consulting/consulting_energy.asp'>Energy</a></li>
        <li class="item"><a href='management-consulting/consulting_lifescience.asp'>Life Sciences</a></li>
        <li class="item" id="last"><a href='management-consulting/consulting_manufacturing.asp'>Downstream Manufacturing</a></li>
        </ul></li>
    <li class="item" id="last"><a href='market-research/research_industries.asp'>Kline Research &nbsp;&nbsp;&nbsp;&nbsp;>></a>

        <ul class="subsubnav">
        <li class="item"><a href='market-research/research_agpesticides.asp'>Ag/Specialty Pesticides</a></li>
        <li class="item"><a href='market-research/research_chemicals.asp'>Chemicals</a></li>
        <li class="item"><a href='market-research/research_consumer.asp'>Consumer Products</a></li>
        <li class="item"><a href='market-research/research_healthcare.asp'>Healthcare</a></li>
        <li class="item"><a href='market-research/research_cleaners.asp'>Industrial/Inst. Cleaners</a></li>

        <li class="item"><a href='market-research/research_petroleum.asp'>Petroleum Products</a></li>
        <li class="item" id="last"><a href='market-research/research_polymers.asp'>Polymers/Materials</a></li>
        </ul></li>
    </ul></li>
<li id="news"><a href='news/pressroom.asp'>&nbsp;</a>
    <ul class="subnav">
    <li class="item"><a href='news/pressroom.asp'>Press Room</a></li>
    <li class="item"><a href='news/events.asp'>Events Calendarp</a></li>

    <li class="item"><a href='news/articles_newsletters.asp'>Articles & Newsletters</a></li>
    <li class="item"><a href='news/recent_news.asp'>Recent News</a></li>
    <li class="item" id="last"><a href='news/news_archives.asp'>News Archives</a></li>
    </ul></li>
<li id="contactus"><a href='contact/contact_us.asp'>&nbsp;</a>
    <ul class="subnav">
    <li class="item"><a href='about/locations.asp'>Office Locations</a></li>

    <li class="item"><a href='contact/directory.asp'>Employee Directory</a></li>
    <li class="item"><a href='market-research/research_purchasing.asp'>Purchase a Research Report</a></li>
    <li class="item" id="last"><a href='forms/contact_form.asp'>Contact Form</a></li>
    <ul></li>
</ul>
</div>
</body>
</html>


ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros