Bootstrap Twitter Dropdown Width
Here's what I want to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
Here's 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 what it looks like now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
Everything works fine except that I cannot get the correct width for the dropdown (I need to reduce the width to fit the text). So how do I go about doing this?
You need to remove the property min-width
in the list .dropdown-menu
. By including the following after , you include bootstrap:
.dropdown-menu {
min-width: 0px;
}
Alternatively, for the exact style you specified, you can use tooltips instead of
Try removing the 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;
}
Well, you can add space to your inner text and it will automatically increase its width, for example you "- Browse by category -"
Add spaces with & nbsp as much as you like, for example
& nbsp - Browse by Category -