Twitter Bootstrap dropdown menu width

Question

Here is what i aim to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing

Here is the CSS for my approach:

@media (min-width: 980px) {
.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}
a.menu:after, .dropdown-toggle:after {
  content: none;
}
.navbar .dropdown-menu {
  margin-top: 0px;
  text-align: center;
}}

And the way it looks now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing

Everything is working fine except that i can't seem to get the right width for the dropdown menu's text (i need to shrink the width according to text). So how do i do that ?

Answer 1

Well you can add space to your inner text and it will automatically increase its width e.g you have "--View by Category--"

Add spaces with &nbsp as many as you want like

&nbsp--View by Category--

Answer 2

You have to remove the min-width property of the .dropdown-menu list. Including the following after you include bootstrap:

.dropdown-menu {
  min-width: 0px;
}

Alternatively, for the exact style you have given, you could use bootstrap's tooltips instead

Answer 3

Try removing padding from the .dropdown-menu .sub-menu classes.

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
  padding: 0;
}