Liam 53

I have created a menu with drop downs entirely out of CSS that works perfectly fine in IE8/FF, however, it doesn't work at all in IE6. Unfortunately, I have to target IE6 as a good proportion of our user base still user it (around 90%).

The code I have is reasonably simple.

CSS

#top-menu 
{
    height: 25px;
    background-image: url(../images/navbg.png);
    background-repeat: repeat-x;
}
ul#nav 
{
    float:left;
    font-size:11px;
    margin: 0;
    padding: 0;
}

#top-menu ul li {
    float:left;
    padding: 5px 0;
    position:relative;
}
#top-menu ul a {
    text-decoration:none;
}
#top-menu a.tab {
    padding:7px 15px 5px;
    text-transform:uppercase;
    color:#ffffff;
} 
ul#nav li.main, ul#nav li.active:hover, ul#nav li.active.over {
    border-left:2px solid #81abd5;
}
li.main {
    height:12px;
    background-color: #81abd5;
}

#top-menu ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin: 0;
    padding: 0;
}
ul#nav li.main:hover, ul#nav li.main.over 
{
    background: #97c6f5 none repeat scroll 0 0;
    text-decoration: underline;
    color: #ffffff;
}
#infoDDContainer 
{
    position: absolute;
    left: -10000px;
    margin-top: -3px;
    z-index: 100;
    background-color: #81abd5;
   border: solid 1px #ccc;
   top: 25px;
   line-height: 12px;
   width: 200px;
   color: #ffffff;
 }
#nav li:hover #infoDDContainer 
{
    left: 0;
    display: block;
}
#nav #infoDDC1
{
    width: 200px;
    margin-left: 5px;
        padding-right: 5px;
    padding-top: 5px;
    height: 210px !important;
}
#nav #infoDDC1 a
{
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
}
#nav #infoDDC1 a:hover 
{
    text-decoration: underline;
}
#nav #infoDDC1 a:visited
{
    color: white;
}

and my HTML that makes up the content of the menu:

<div id="top-menu">
                <ul id="nav">
                   <li class="main">
                        <a href="#" class="tab">Information</a>
                        <div id="infoDDContainer">
                            <div id="infoDDC1">
                                <a href="#">item 1</a><br /><br />
                                <a href="#">item 2</a><br /><br />
                                <a href="#">item 3</a><br /><br />
                                <a href="#">item 4</a><br /><br />
                            </div>
                        </div>
                   </li>
                   <li class="main">
                        <a href="#" class="tab">Departments</a>
                   </li>
                   <li class="main">
                        <a href="#" class="tab">Applications</a>
                   </li>
                   <li class="main">
                        <a href="#" class="tab">Reports</a>
                   </li>
                   <li class="main"><a href="#" class="tab">Other</a></li>
                </ul>
            </div>
        <div id="clear"></div>
 </div>

It's literally as simple as that. But I just can't work out how to get the CSS:

#nav li:hover #infoDDContainer 
{
    left: 0;
    display: block;
}

to work in IE 6. Am I missing something entirely, or doing something wrong?

Any help is appreciated.

2 answers

2
points
This was chosen as the best answer

The hover pseudo class can only be applied to a elements in IE6. You need to simulate the hover by adding a class on mouseover. I use something like this (taken from the Suckerfish menu):

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
addLoadEvent(sfHover);

Run the script in a set of IE conditional comments, then everywhere you have li:hover, add another selector for li.sfHover.

Answered almost 9 years ago by Rob Crowther
0
points

You could use the whatever:hover behaviour, which will apply appropriate on mouseover events to simulate the hover pseudo class for IE 6.

get it here: http://www.xs4all.nl/~peterned/csshover.html

Answered almost 9 years ago by Tony Crockford