Question

I am trying to replicate the effect I see

Currently I have http://jsfiddle.net/GWkk3/

How can I remove the border between the active li and the 2nd level nav?

Answer 1

Draw the border on the parent <li> elements rather than the child <ul>. Add/change these properties:

.appTabs li {
    border-width: 1px 0 1px 1px; /* was 1px 0 0 1px */
}

.appTabs li.active {
    border-bottom: 1px solid #EEE;
}

.appTabs li ul {
    top: 25px; /* was 24px */
}

And remove this property:

.appTabs li ul {
    border-top: 1px solid #CCC;
}

That gets us this far:

Now the inner border just needs to be extended all the way to the right (I’m working on that part).