CSS Horizontal Drop-down menu problem IE/FF

[understudy]

RE: http://bradhenderson.com/test/

Hello everyone,

I'm having a bit of an issue with this menu.

If you rollover 'Services' you'll see the black submenu. I want that to be even with the color break between red and black on the header image, but if I use absolute positioning to push it down or add an invisible LI element of some height, IE (6.0) makes the submenu disappear when the mouse starts to move over the positioned distance or invisible LI element. Even as-is, IE 6 still makes the submenu disappear before it can me moused over. Does anyone know a work-around?

Thanks for taking the time to look at it.

My best,
David

//

PS: The menu was based on the code here: http://www.htmldog.com/articles/suckerfish/dropdowns/

[Abus]

Hi Brad,

I just downloaded your page and since I have alergy to table based designs I have rewrited that little code with divs. And I have took a css only drop down menu from www.cssplay.co.uk (http://www.cssplay.co.uk)

Currently the submenus are even with the start of the black area and in my opinion it looks better than your first testpage.

There is a comment at the top of the css code so you can find a commented version of that menu at that URL.

I hope this helps.

[understudy]

Abus,

That looks great! I never expected anyone to re-tool that much of it. Thank you so much for taking the time to fix it.

My best,
David

//

[understudy]

RE: http://www.bradhenderson.com/test/

Abus was kind enough to customize the spiffy drop down menu. Now I must have screwed something up when I started adding more content.

The middle photo (arrow and target) is shifted downward on the page -- presumably because the drop down menu items are in the white space even when not visible. How do I position it about 20 pixels below the header image (to where the menu will drop down over it) and...

When hovering over 'services' and letting your mouse start to scroll downward, the menu disappears at the second list item. Perhaps both of these are related.

This is my first site where I am relying on CSS for so much rather than image slicing and tables. Help!

Thanks,
David

//

PS: The menu CSS file is http://bradhenderson.com/css/header.css and the other CSS is in the file http://bradhenderson.com/css/middle.css

[Abus]

Which browser are you using?

[understudy]

Which browser are you using?

FF 2.0 and IE 6.0

[Abus]

Hi again,

First of all your content being very below the header is because there is a padding-bottom:200px at the menu class.

"When hovering over 'services' and letting your mouse start to scroll downward, the menu disappears at the second list item. Perhaps both of these are related."

In the files I have send you I didnt experience the problem, but when i check your website. I have experienced that problem on FF2 not on IE6.

I have added the image and the information area below the image.

I advise you to use

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen"/>

instead of importing css.

I didnt used javascript for the Rounded Box. It is just a css taken from www.cssplay.co.uk (http://www.cssplay.co.uk). Before trying to find a javascript solution try that website for CSS Only solutions.

If you experience any further problems, please dont hesitate to ask.

[jp182]

i'm having a horizontal drop down menu problem as well but my problem is different:

http://www.thespeedlounge.com/stufftest.shtml

the problem is that in IE 6.0, the navigation won't extend to the end of the image above it. It looks correct in FF 2.0 but not IE. I've tried adjusting the width and fiddling with the border size as well but either it won't move at all OR it moves that last box to a second line. Here's the CSS code for the menu:



dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 0;
left: 0;
z-index:100;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
margin-top:0;
margin-bottom:-15px;
}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and
Opera streches it half way. */
html>body #menu { /* ie5win fudge ends */
margin-top:3px;
margin-bottom:8px;
}

/*changing the margin on this will change the main menu's spacing*/
#menu dl {
float: left;
width: 7.21em;
margin: 0 0px 1px 0;
}
html>body #menu dl { /* ie5win fudge ends */
width: 7.18em;
}

/*changing the background color on this will change the main menu as well as the individual menus*/
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #333333;
border-left:1px solid #999999;
border-right:.01em solid #999999;
width: 7.06em;
height:1.70em;
padding-top:10px;
}
html>body #menu dt { /* ie5win fudge ends */
width: 7.16em;
border-right:1px solid #999999;
}
#menu dd {
border: 1px solid black;
position: absolute;
height: 25px;
}
#menu li {
text-align: center;
background: #333333;
padding: 2px;
border: 1px solid #999999;
}
#menu li a, #menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;

}
#menu li a:hover, #menu dt a:hover {
background: none;
}


Any help would be appreciated.

[Seb Hughes]

^CONTENT WARNING BTW, IF YOUR AT WORK MIGHT NOT BE THE BEST IDEA TO OPEN

[jp182]

crap, yeah let me change the test page :)
i forget sometimes that the stuff we work on isnt work safe every where

so.....any suggestions?