CODEWITHSUNDEEP
asp.nethtmlcssinternet-explorer-6menu
user172632
user172632

Reputation:

CSS with IE6 Drop Down Issue

I've been working on getting a menu up and running with pure CSS. I've got it working in all the browsers except for IE6. Here is my CSS.

/**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**
NAVIGATION MENUS
~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**/

#topNavigation
{
    width: 750px;
    background-color: #EC2327;
    float: left;
    position: absolute;
    z-index: 10;
}

#footerBar
{
    float: left;
    width: 750px;
    background-color: #EC2327;
}   

#topNavigation ul, #footerBar ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 6em;
    float: left;
}

#topNavigation a, #topNavigation h2, #footerBar a
{
    font-family: Verdana;
    font-size: 12px;
    font-weight: normal;
    color: White;
    text-align: center;
    display: block;
    margin: 0;
    padding: 2px 3px;
    text-decoration: none;
}

#topNavigation h2
{

}

#topNavigation a
{
    color: White;
    background-color: #EC2327;
}

#topNavigation a:hover
{
    color: #EC2327;
    background-color: White;
}

#topNavigation ul ul 
{
    display: none;
    position: absolute;
    width: auto;
    z-index: 500;
}

#topNavigation ul li:hover ul
{
    display: block;
}

And here is some HTML that uses this CSS.

<div id="topNavigation">
        <ul>
            <li><h2><a href="#">About Us</a></h2>
                <ul>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="partners.aspx">Partner's Page</a></li>
                    <li><a href="testimonials.aspx">Testimonials</a></li>
                    <li><a href="#">Environmental</a></li>
                </ul>  
            </li>
        </ul>
</div>

The issue is that the menu won't shoot down in IE6. Although I can get the top level

  • to accept the a:hover command it only changes color. What do I need to do inorder to get the next level down to fly open on that hover? I'd prefer to keep this pure CSS if possible.

    Thanks, Mike

    Upvotes: 0

    Views: 546

    • Answers (2)

    Mark Bell
    Mark Bell

    Reputation: 29785

    The :hover pseudoclass is only supported on a elements by IE6, unfortunately.

    Check this article for some advice on how to script around the problem.

    Upvotes: 1

    o.k.w
    o.k.w

    Reputation: 25820

    It seems that the following is not effected in IE6

    #topNavigation ul li:hover ul
{
    display: block;
}

    Can you give the level 2 UL/LI a css class assignment then create a selector for it?

    Upvotes: 1

    Related Questions