Displaying third tier submenus properly with css only menu

Question

I am developing a new site, and am having problems with the css menu. It is easier to explain by example: Here is the link of the site: http://www.webau.net/CSFF/index.asp

Answer 1

There are 3 issues here.

1. You are displaying all <ul/> elements that exist below a hovered <li/>. Change #navsection ul li:hover ul to #navsection ul li:hover > ul to select the immediate child only

2. You are setting the position of each drop level to be the same. Try adding something like #navsection ul ul ul { top: 1em; left: 140px; }, this will stop the grandchild obscuring the child.

3. You're title attributes are negatively affecting your navigation. I'd remove them entirely as they do not add any real beneficial information to the link and obscure the menu items making the navigation difficult to use.

I hope that helps :)