How to draw lines through Bootstrap vertical dividers?

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 ?

Solution 1

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

Solution 2

simply use

<hr class="divider">

that should give you what you want

Solution 3

Now there is:

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

Solution 4

If I understood you correctly

<li><hr></li>

Should be useful

View more solutions