Drop Down Level 1 Menu Disappears on Mouse Over Div Below

Drop Down Level 1 Menu appears on top of the div below it fine. But, when I hover down and my pointer goes over the div that sits below the drop down, the drop down disappears.

Do you have a page that we can view to demonstrate the problem? That will allow us to test and determine the cause.

Seems to be a problem with IE7.Works in IE8, Firfox, Safari. What about IE6? We wanted the MenuWriter so we could avoid compatibility issues.

index.php

Click the SHOWS link for the drop down.
Thank you.

Hiya Heather.

That's weird. I thought a z-index shuffle would sort it, but apparently not.

What should sort it though, is that at present you have the victoriaplayhouse.jpg as an image sitting up-front inside the 'left-homepage' div. This image is the one that's causing the problem.

If you give your left-homepage div a height of 300, and remove victoriaplayhouse.jpg from the page but add it to the css as the background-image for that div, then the problem seems to go away.

So delete the image from the page, and then in your 'vp.css', change the rules for your left-homepage div to:

#left-homepage {
	padding: 0px;
	width: 500px;
	margin-top: 10px;
	margin-right: 30px;
	margin-bottom: 10px;
	margin-left: 30px;
	float: left;
	height: 300px;
	background-image: url(../images/photos/victoriaplayhouse.jpg);
}

Hopefully.

It still disappears when your mouse goes over the div below, even when there is just text in it.

I am having this exact same problem when testing on IE7. I thought it had to do with the flash file in the div below it, but I get the same result on any page I visit that has just a jpeg in the div below. I used MenuWriter on another site built with tables and did not have this problem so I know the problem lies with the interaction with the div.

Site with the problem:
www.espguitars.com

Site without problem:
www.sfdamp.com

Both use MenuWriter, but the difference is in how the sites are built. Any thoughts?

Edit:
I see the problem is not that there is a div underneath the nav div. The dropdown disappears when the mouse leaves the div that the navigation is in. I deleted everything on the page, leaving only the one navigation div and the problem still exists. If I extend the height of the div to a height greater than the height of the dropdowns, they will stay. Confusing...

In IE whenever I move over the sub-links in my drop-down menu they disappear. I know this is something to do with leaving the DIV that my nav bar is in, but I don't know how to fix that. I've tried playing with Z-index settings. If I extend the height of the DIV that my nav bar is located in so that it is longer than my drop-down menu then the sub-links work properly.

I've been stuck on this for 2 days now. Any help would be greatly appreciated.

Thanks, in advance

Edit: I've not got my menu displaying correctly. My problem was down to the fact that I had an image directly below the DIV that contained the menu. I changed this image to a background image, rather than an on-page image and placed it within a new DIV set out to be the exact same size as the image. This fixed my problem. You can view it working here: www.yellowcircle.co.uk

I encountered the same issue regarding the dropdown links area for the navigation bar, the dropdown box would show then disappear when moving to hover over link, I experiened the problem only with IE, 7 & 8. Firefox, Google Chrome, & Safari did not seam to have this problem.
Found 2 ways to fix but only one is friendly to all browsers.

1) make image below navigation bar a background image using CSS (great for IE but not so great for other browsers which would not use the background image so to remidy this I placed image physically then used CSS to hide image if browser is IE on page load. Only problem I encountered was that IE8 would not display the background image and because of the CSS rule would not display the physical image, all other browsers worked great.

2) using CSS rules on page load strictly for IE only adjustments to the background dropdown. Width is of course is adjustable as needed or you can use transparent gif files in the menu.php file to ensure that the width of the box is the same for all links, place the gif file after the text but be sure to place the image file within the <a> tag. The actual fix for the dropdown falling behind is using the float rule, this at least worked accross all browsers.
The code used on page is below.

<!--[if IE]>
<style type="text/css">
#navWrapper #topNavigation ul#cssmw_home ul.level-1 > li > a {
float:left;
width:200px;
}
</style>
<![endif]-->

Good Luck!

Just a follow up, the width attribute is generally already set in the menu.css so since it is already assigned a value by default in the menu.css then the width specification is not needed in the code I first provided, code below works perfect.

<!--[if IE]>
<style type="text/css">
#navWrapper #topNavigation ul#cssmw_home ul.level-1 > li > a {
float:left;
}
</style>
<![endif]-->

Originally Said By: miav solutions

  Just a follow up, the width attribute is generally already set in the menu.css so since it is already assigned a value by default in the menu.css then the width specification is not needed in the code I first provided, code below works perfect.

<!--[if IE]>
<style type="text/css">
#navWrapper #topNavigation ul#cssmw_home ul.level-1 > li > a {
float:left;
}
</style>
<![endif]-->  

Please, anybody can help me, i put this code on my page and i already have problem with IE7 only ...
my web page is : menuh2.php
Please help me it's very urgent and i don't find the solution ....