CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menu
user796564
user796564

Reputation: 11

CSS dropdown menu just isn't working in IE 6 7 or 8

I have been wracking my head over this all day, and have been all over every forum I could think of looking for a solution... to no avail... please help.

I have a pretty simple website I'm working on, with a very basic dropdown menu.

It works and looks great in Firefox and in Safari... but the drop down just doesn't show up in Internet Explorer... not on any version I can find.

Here is a temporary link: website

hover seems to be working because the link change color but the drop down fails

this is essentially a template which will be used to make the whole website later... for now I just want to get this menu working.

Also: ie seems to be putting a weird border around the logo... anybody know whats up with that?

Upvotes: 1

Views: 402

Answers (2)

toby
toby

Reputation: 902

To get rid of the border on the logo use this in the stylesheet:

a img {
border-style: none;
}

I tried a few things and the hover event is not working with the selectors you used:

#menu ul li:hover ul

I got it to file with this:

#menu ul a:hover

But then you can't access the UL element to show it... I think you will need Javascript to fix this in IE (at least IE6).

Upvotes: 1

Midas
Midas

Reputation: 7131

IE6 simply doesn't support :hover on other elements than links. Take a look at the sfHover function from the Son of Suckerfish Dropdowns article by HTML Dog. The function is a JavaScript alternative for IE6. I suggest you read the full article.

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'), '');
        }
    }
}
if (window.attachEvent) window.attachEvent('onload', sfHover);

And for the border around the image, simply add:

img { border:0 }

Upvotes: 0

Related Questions