How to draw lines through Bootstrap vertical dividers?

Question

I use Twitter Bootstrap I need to make the menu bar as follows: https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png .

So, I need to draw lines through the vertical dividers.

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

I can not figure out how to do this?

Answer 1

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

Then you are not looking for a vertical separator that will look like a border, but for a border, and you just need to hide some of them.

Here is your key:

 .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; } 

padding-bottom is actually just one more pixel than the default.

Another important thing is the position on the left or right:

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

I fixed a few other things to improve the effects, but you have a basic idea.

Updated jsfiddle

Answer 2

just use

 <hr class="divider"> 

which should give you what you want

Answer 3

Now it is:

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

Answer 4

If I understand you correctly

 <li><hr></li> 

Must be useful

Answer 5

Your post is a bit confusing, but from the image you posted, it looks like you want to create a tabbed menu with a drop-down list? If so, Bootstrap already allows this.

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

Here's a demo: http://jsfiddle.net/LWTqS/