CSS Menu Writer Drop Downs Disappear

I have a problem with CSS Menuwriter. When ever a lomg menu drops down and reaches underlying text below, it can't be accessed and disappears. I've only tried this with IE8.
You can see an example in a temporary build we're doing at www.tallgrass.com.au
I've looked at 5+ other sites we're doing and they all have the same problem.
Notice that a gap appears between each level 2 menu item.
We've gone back and loaded CSS Menuwriter in its default form with no width changes to any level 2 and level 3 menus and we get the same problems.
We can't use the product if we can't put text on a page.
Need some advice on an easy fix please.

If you went back and put all the CSS Menu back to default did you remember to upload the CSSMenuWriter folder with the supporting pages and images to the server? If nothing changed after putting it back to default it would seem that the changes were not uploaded.

Yes I know how that works. I uploaded EVERYTHING on the site including the CSSMenuwriter folder.
I think I didn't make it clear or you misunderstood. Of course the content changed after I took it back to the default. What didn't change was the effect whereby the menu items cease to work and disappear as soon as a mouse hovers over them, when they superimpose onto the text on a page. If there is no text underneath the drop down, then it's fine. As soon as text is encountered UNDER a menu item, the menu drop down disappears.

When I view the page I can see the gap you are talking about in the level 1 and level 2 sub items. I did some testing and found that if I adjust the bottom margin for the level one li to -5px it seems to get it working correctly. Here is the css that was updated:

menu.css line 81
ul#cssmw ul.level-1 > li > a {
background-color:#DA5242;
background-image:none;
border-bottom:1px dotted #F4E1C9;
border-left:1px solid #F4E1C9;
border-right:1px solid #8B675A;
color:#FFFFFF;
display:block;
font-family:"Trebuchet MS",Helvetica,sans-serif;
font-size:10px;
font-style:normal;
font-weight:bold;
margin:0 0 -5px; /* this is the part that was added */
padding:5px;
text-align:left;
text-decoration:none;
text-transform:uppercase;
width:125px;
}

Although I didn't agree at first, Eric is on the right track.
I thought the gaps between the menu items and the fact that they disappeared when superimposed over page text were two separate issues - they're not.
The problem is now clear. When the gaps appear between menu items and the mouse strikes a gap with underlying text, the browser thinks that it's no longer on the menus so it drops them and shows the undelying text.
I think the gaps are a result of an inherited class definition from the page's master css file.

However you need to go further and do the same modifications that Eric has shown for every part of the Menu CSS that relates to levels 2, level 3 and so on. Then it all seems to work.

It is also possible to have the text from the body of the page show on the same level as you menu item, this is usually caused by positioning and a lack of any defined z-index. If you encounter this problem these are the properties you should be adjusting.

Hello,

One thing that can help is using a Conditional Comment and specify the rule for IE7 only


Place in head tag

<!--[if IE 7]>
<style type="text/css">

ul#cssmw ul.level-1 > li > a {
height: 16px;

</style>
<![endif]-->

This will mean at least all other browsers will render width auto ok. And you only have to worry about IE7