How to draw lines through Bootstrap vertical divid

Question

I'm using Twitter Bootstrap I need to draw menu line this: https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png .

So I need draw lines through vertical dividers.

Here what I have now - http://jsfiddle.net/KckU3/8/

I can't get how to make it ?

Answer 1

simply use

<hr class="divider">

that should give you what you want

Answer 2

If I understood you correctly

<li><hr></li>

Should be useful

Answer 3

First you had a typo in the .dropdown-toggle class.

Then, you are not looking for a vertical divider, which would look like a border, but for a border, and you just need to hide some of it.

Here is your clue :

.navbar .nav > li > a.dropdown-toggle {
    position: relative;
    bottom: -1px;
    z-index: 1005;
    background: white;
    padding-bottom: 12px;
}

ul.nav li.dropdown:hover ul.dropdown-menu {
    /* ... */
    border-top: 1px solid #000;
}

The padding-bottom is actually just one more pixel than defined by default.

The other important thing is the position to left or right :

ul.nav li.dropdown:hover ul.dropdown-menu {  
    /* ... */
    left: 0px;
}

I fixed a few other things for better effects, but you have the main idea.

Updated jsfiddle

Answer 4

Your post is somewhat confusing, but from the image you posted, it appears you want to create a tabbed menu with a dropdown? If so, Bootstrap already lets you do that.

Tab Menus: http://twitter.github.com/bootstrap/components.html#navs Dropdowns: http://twitter.github.com/bootstrap/javascript.html#dropdowns

Here's a demo that puts it together: http://jsfiddle.net/LWTqS/

Answer 5

Now there is:

<li class="divider"></li>