Posted by Sorrel Parsons on

Hi Joe,

A group that we designed a CSS theme for have an issue with the drop down navigation menu items being displayed behind the main content on the pages. This wasn't happening before so I'm not sure what has changed, although I did make some recent but basic changes to their design - is this a problem you've seen before and is there an easy way to correct it? This is the site:

http://www.agewatch.org.uk/

I can't see the same thing happening in any of the other templaytes we're using.

Many thnaks again!

Sorrel

 

Posted by Voice Admin on

I don't want to get too involved in debugging your custom CSS themes, but it does look like the CSS that you've added to show/hide the menus does have a few problems.

I find that it's impossible to get to the sub-menu items as the menu closes itself before I can get the mouse pointer over a sub-menu item. I believe this is caused by the main content being "on top" of the menu - in particular the main H1 for the page. This is why the menu doesn't pop up when you hover over the bottom part of the menu item, only the top part. (try increasing the top margin for H1 in your css to 100px or so, and you'll see the menu works much better!)

As for the menu items opening underneath items on the page - which items are causing the problem as I don't see this? I expect it's something to do with the z-index that you are choosing for the popup menus. Though these can be rather tricky to get right in my opinion, not least due to bugs in various browsers!

Thanks

Joe

Posted by Sorrel Parsons on

Thanks Joe - I'll have a play around. Could yuou recommend any good CSS resources such as websites or books? I'm also going to look at some CSS training too.

Thanks again,

Sorrel

Posted by Voice Admin on

I rely heavily on the Firebug and Web Developer Add-Ons for Firefox. They seem to be excellent for helping to fix and debug CSS.

I don't know if there are any great teaching sites for CSS - though once you have a basic understanding I would recommend the w3schools site as a good reference:

http://www.w3schools.com/css/

Good luck!

Joe - Voice Admin