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

CSS Menu Writer Drop Downs Disappear

Thread began 8/04/2009 10:48 pm by tony.mccormick379821 | Last modified 9/13/2009 11:16 pm by simmo515303621 | 3582 views | 6 replies |

tony.mccormick379821

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.

Sign in to reply to this post

danjenBeta Tester

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.

Sign in to reply to this post

tony.mccormick379821

When I changed it all back to default

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.

Sign in to reply to this post

Eric Mittman

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;
}

Sign in to reply to this post

tony.mccormick379821

That part fixes it but there's more to do.

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.

Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

simmo515303621

Possible helpful fix

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

Sign in to reply to this post

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