close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

SubMenu is behind my Main Menu

Thread began 12/10/2009 3:04 pm by chase.vincent395941 | Last modified 12/18/2009 2:36 pm by Jason Byrnes | 2833 views | 18 replies |

chase.vincent395941

SubMenu is behind my Main Menu

I'm creating a navigation bar and the sub menu pops out but it is behind the main menu and I don't know how to fix it. I have attached a picture and my menu.css file Any help would be appreciated.

Attached Files
menu.txt
Sign in to reply to this post

neilo

try adding a z-index to the sub-menu css:

ul#cssmw0 ul.level-1 > li > a {
height: 10px; width: 121px
z-index: 999;
}

Sign in to reply to this post

chase.vincent395941

That didn't do it but thanks neilo

Sign in to reply to this post

neilo

The z-index of the top level is set to 9999

ul#cssmw0 li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 9999;
}

Try setting this to a lower number than the sub-level. (-1)

Sign in to reply to this post

Jason ByrnesWebAssist

Neilo is correct that it should be fixed with a z-index rule, if z-index is not fixing it, there may be some other conflicting css. Please send a link so we can take a look at the problem in a browser to get to the bottom of the problem.

Sign in to reply to this post

chase.vincent395941

You can visit the site at homepage.html

The first tab "Sales Plan" has 3 sub-menus that fall behind the main menu. I tried fixing the z-index number but still not working.

Any other ideas.

Thanks

Sign in to reply to this post

neilo

Hiya,

In your 'cssmw1/menu.css':

Remove the 'z-index: 100;' from your 'ul#cssmw1 li' style (about line 23):

ul#cssmw1 li {
background-image: none;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
}


and add it to your 'ul#cssmw1 ul.level-1' style (about line 77):

ul#cssmw1 ul.level-1 {
left: 132px;
margin-right: 25px;
z-index: 100;
}
Sign in to reply to this post

chase.vincent395941

Neilo,

That fixed it for Firefox but not IE. I tried changing it in the other style sheets as well but no luck.

\cssmw0\menu.css
\cssmw0\menu_ie.css

\cssmw1\menu.css
\cssmw1menu_ie.css

Sign in to reply to this post

neilo

Can Jason come back in on this one please?

For me this is testing fine on Firefox, Safari and IE8 (Vista). It is failing in IE7, which is very quirky when it comes to z-indexes.

I have tried many combos including setting the position values for the z-index properties, but am still getting a problem in IE7.

I think we need Jason back in on this.

The only thing I would suggest is to not have the first and second level menus overlapping at all, thus negating the need for a fix.

Sign in to reply to this post

chase.vincent395941

Neilo,

I know IE7 has a lot of problems but most of our users have not updated yet. Would i have to create a new nav. bar for them to not overlap or is that something you can control in the settings? Sorry for so many questions, I'm new at this.

Chase

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