HTML and CSS navigation menu woes

Question

I have a vertical nav menu that is made up of nested lists, however when sub menu is active anything underneath that menu is not clickable.

For example in the link below "test crop" is active but I cannot click on the two links below this, I cannot see a problem in my HTML or CSS, and I think the bug is only apparent in Firefox, here is the link http://apigroup.factoryagency.co.uk/browse-products/laminate-board-paper/Test-Crop

Answer 1

Your issue is because the navigation menu is a child of a .wrapper class, as well as the main content area, both which have a z-index of 999. The .wrapper element further down the page will take z-index precedence in this case. As you can see in my screenshot below the main content area where there is the advantages and test corp title overlaps with the navigation element. I would add an additional class to the main content area and specify a z-index less than 999.

Answer 2

This is because you have this CSS:

.wrapper {
    clear: both;
    margin: 0 auto;
    position: relative;
    width: 944px;
    z-index: 1000;
}

There are two divs of class wrapper , with the same z-index. The first one contains the nav. The second contains the large body content. The second one, because it occurs later in the page and has the same z-index, will appear on top of the first. This means that it is covering the nav, preventing it from being clicked.

The solution is to give the first div.wrapper a HIGHER z-index. You can do this by giving it an ID, and then setting the z-index on that ID.