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

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.