Question

You can see here the the li on the right is set to ‘active’ so has a bottom border which covers the ul’s bottom border, as desired. http://jsfiddle.net/6XTY2/ However, when I set the left li to ‘active’ it pushes the ul’s bottom border down, so the border below the left li is not covered up by the li’s border. I assume this is because the left li is not floated. http://jsfiddle.net/6XTY2/1/ But if I float the left li then the all the children of div and ul are floated which causes other issues. How can I get around this?

Answer 1

You can add a negative margin:

#nav ul li.active a {
    margin-bottom: -2px;
}

But you would have to undo that for the secondary navigation:

#nav ul li.active.nav-secondary a {
    margin-bottom: 0;
}