Twitter Bootstrap menu déroulant largeur

Voici ce que je cherche à faire: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing

Voici le code CSS de mon approche:

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

Et la façon dont il regarde maintenant: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing

Tout fonctionne bien sauf que je n'arrive pas à obtenir la bonne largeur pour le menu déroulant du texte (j'ai besoin de rétrécir la largeur en fonction du texte). Alors, comment dois-je faire ?

OriginalL'auteur Abdulrahman AlQallaf | 2013-02-14