title: Twitter Bootstrap dropdown menu width
body: <p>Here is what i aim to do: <a href="https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing" rel="nofollow">https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing</a></p>
  
  <p>Here is the CSS for my approach:</p>
  
  <pre><code>@media (min-width: 980px) {
  .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
  }
  ul.nav li.dropdown:hover &gt; ul.dropdown-menu {
    display: block;
  }
  a.menu:after, .dropdown-toggle:after {
    content: none;
  }
  .navbar .dropdown-menu {
    margin-top: 0px;
    text-align: center;
  }}
  </code></pre>
  
  <p>And the way it looks now: <a href="https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing" rel="nofollow">https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing</a></p>
  
  <p>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 ?</p>