close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Drop Down Level 1 Menu Disappears on Mouse Over Div Below

Thread began 1/27/2010 8:14 am by heather384148 | Last modified 4/15/2010 3:30 am by cypareja397542 | 6898 views | 11 replies |

heather384148

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.

Sign in to reply to this post

Ray BorduinWebAssist

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

Sign in to reply to this post

heather384148

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.

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

heather384148

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

Sign in to reply to this post

dave375361

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...

Sign in to reply to this post

YellowCircleWeb

My level 1 drop-down links disappear in IE8 too - help!!

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

Sign in to reply to this post

miav solutions

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!

Sign in to reply to this post

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]-->

Sign in to reply to this post

cypareja397542

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 ....

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...