Drop Down Not Behaving in IE 7

[jennifinch]

HI Ryan,
Gratz on such an awesome plugin. I have used it many times in different sites with no issues at all, but am having a tiny problem that I can not seem to debug myself. I am sure I am missing something very obvious and I am hoping you can point it out. I am including links to the page with issues, the css, and screen shots. THANK YOU!

Oak Bluff
http://216.92.124.101/

[code:228okpov]#suckerfishnav {background: url("images/bgMenu.png") no-repeat;font-size:.8em;}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:33px;padding:0;width:100%;}
#suckerfishnav a {display:block;color:#ddd;text-decoration:none;padding:0px 10px;}
#suckerfishnav li {float:left;padding:0;text-align:left;}
#suckerfishnav ul {position:absolute;left:-999em;height:auto;width:151px;font-weight:normal;margin:0;line-height:1; border:0;border-top:.2em solid #000;}
#suckerfishnav li li {width:149px;border-bottom:1px solid #666;border-left:1px solid #666;border-right:1px solid #666;font-weight:bold;font-family:verdana,sans-serif;}
#suckerfishnav li li a {padding:4px 10px;width:130px;font-size:12px;color:#ddd;font-weight:100;}
#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#suckerfishnav li li:hover {background:#069;}
#suckerfishnav li ul li:hover a,
#suckerfishnav li ul li li:hover a,
#suckerfishnav li ul li li li:hover a,
#suckerfishnav li ul li li li:hover a  {color:#ddd;}#suckerfishnav li:hover a,
#suckerfishnav li.sfhover a {color:#ddd;}
#suckerfishnav li:hover li a,
#suckerfishnav li li:hover li a,
#suckerfishnav li li li:hover li a,
#suckerfishnav li li li li:hover li a {color:#ddd;}
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li li li li:hover ul,
#suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul,
#suckerfishnav li li li li.sfhover ul  {left:auto;background:#5ba7c9;}
#suckerfishnav li:hover{background:#069;}
#suckerfishnav li.sfhover {background:#5ba7c9;line-height:30px;}
[/code:228okpov]

Screen Shot
http://www.flickr.com/photos/jenniferfinch/4386326370/

[imported_Ryan]

Hi Jennifer,
Sorry for the long delay in getting back to you.

I don’t normally help with stuff like this (heavily customised CSS), but since you are a loyal plugin user I’ll make an exception ” title=”Smiley” />

To get it to work, I had to remove the float:right (not sure what it was there for anyway) from the menu, then used absolute positioning to line it up identically across a range of browsers, then applied relative positioning to it’s containing block to line it up relative to the rest of the content.

I then moved the rest of the content downwards by 20 pixels via relative positioning so that it wasn’t obscured by the menu. You could also do this by using margins instead of direct positioning.

Here is the CSS I modified to get your menu working the way your image said it should:
[code:3nbpx7x4]#container { position:relative; }
#contentWide { position:relative; top:20px; }
#suckerfishnav {
position:absolute;
left:0;
top:115px;
background: url("http://216.92.124.101/wp-content/themes/OakBluff/images/bgMenu.png") no-repeat;
font-size:.8em;
width:100%;
z-index:10000;
}
#suckerfishnav, #suckerfishnav ul {
padding:0;
float:left;
list-style:none;
line-height:33px;
margin:0;
}[/code:3nbpx7x4]

[imported_Ryan]

I split one of the posts off from this topic … https://geek.hellyer.kiwi/forum/http://local … ic.php?t=4

[Author]

Posts