Twitter Bootstrap Nested Nav Lists

Overview

I finally was able to begin using Twitter Bootstrap in a recent project for which I am recreating a complex navigation into the new Bootstrap interface. But, I found that while I needed to support nested nav lists within the top level nav list, Bootstrap doesn't seem to have any built in support for it: Bootstrap Navbar.

So, I built support for it; and here's what I came up with:
(screenshot)

The Code

I wanted to preserve Bootstrap's naming convention and HTML structure, so I didn't want to do anything really very new. I also wanted to retain their common styling, but come up with something that worked for sub navigation. So, I started with adding my HTML
(forgive the html styling here, the tool I'm using doesn't prettify very well):

   Nested Lists  
Top Stuff
Nested List  
Foo
Bar
Bat

Nested List  
Foo
Bar

Sit
Amet
Dolor

Other Stuff
Foo
Bar
Bat

​

So, basically I just repeated their existing convention, and added a "nav nav-list" classed li, with a dropdown-menu ul under it.

Next, I needed to start styling; using their common style, I enhanced the nexted nav functionality by adding :hover state show/hide of the sub menu list.

.nav li.dropdown ul.dropdown-menu li:hover ul {
    display:block;
    position:absolute;
    left:100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.nav li.dropdown ul.dropdown-menu ul {
    display: none;
    float:right;
    position: relative;
    top: auto;
    margin-top: -27px;
}

Bootstrap on it's own adds carets (the arrows) for dropdown menus, and sort of assumes the sub-nav will always be below your menu item. So the menu item's caret/arrow always pointed down, and the sub-nav's menu arrow always pointed up; I needed to address this:

.nav li.dropdown ul.dropdown-menu .nav-list .caret {
    border-bottom-color: #999;
    border-top-color: #999;
    float: right;
}

.nav li.dropdown ul.dropdown-menu .nav-list:hover .caret {
    margin-left: 6px;
    margin-top: 5px;
    margin-right: 1px;
    border-right: 0;
    border-left: 4px solid #fff;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.nav li.dropdown ul .nav-list .dropdown-menu:after {
    top: 8px;
    left: -12px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #fff;
}

.nav li.dropdown ul .nav-list .dropdown-menu:before {
    left: -7px;
    border-left: 0;
    top: 7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid rgba(0,0,0,0.05);
}​

Here things began to get a little tricky; specifically, Bootstrap uses CSS borders to draw their carets/arrows (which I think is a great approach by the way); this is fine, but because I'm inheriting their styles on my new nav element, I needed to reverse the borders I didn't want so I could adjust the direction of my caret/arrow to the right and left (for the sub nav); then I could add the styles I did need, with colors appropriate for my nesting.

Finally, I added in some common list item over styling:

.nav li.dropdown ul.dropdown-menu li.nav-list:hover {
    background: #08c;
    color: #fff;
    cursor: pointer;    
}

.nav li.dropdown ul.dropdown-menu .nav-list {
    font-size: 13px;
    color: #333;
    float: none;
    line-height: 21px;
}

FULL DEMO WITH CODE

Add here you have the finished product...we now have a dropdown menu list, with sub-nav elements, indicated by custom carets, when hovered reveal their own dropdown lists (though dropped to the right), with left arrows instead of up arrows, and all commonly styled ala Bootstrap. Boo yah!