Drop-down menu not showing in IE

Hi, I’m having an issue with the drop-down menu not showing past the boundary of the parent div in IE 6 & 7.

You can see the site in question here: http://www.dellsvet.com/index.php

Anybody know what bug this is and how to squash it?


You need to set the higher z-index on the parent of the ul for IE7.

#header {
    position: relative;
    height: 228px;
    overflow: visible;

You then need to float the anchor or it will be 100% wide in ie6:

ul#nav a {
    position: relative;
    display: block;
    color: #d9dc81;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;

You then need to set the top position as IE gets auto wrong:

ul#nav li ul {
    display: none;
    position: absolute;
    width: 180px;
    padding: 10px 0;
    left: -20px;
    background: #1c3202;
    z-index: 50;

The drop down still won’t work in IE6 because you don’t seem to have any JS applied to make it work as IE6 only understands hover on anchors. See the suckerfish menus for examples.

Paul, wouldn’t the hover.htc fix this issue?

Yes, the hover htc would also address the issue as its just basically more javascript packaged only for IE.:slight_smile: It’s a good solution.

I find the suckerfish script the easiest to implement though especially if you dont know if/how your server is configured for htc etc.

Either method is good.

Paul, thanks so much, that was a perfect fix. You’re right, the son of suckerfish menu script is much easier to implement.

I appreciate it.