Jquery 全宽度引导下拉列表

我正在尝试制作一个类似于本页菜单的引导菜单

这就是我想到的，我现在几乎陷入了困境

如何使下拉文本显示在每个下拉按钮下方，就像它显示在屏幕上一样

index.html

 <div class="navbar navbar-inverse">
   <!-- Header -->
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
         data-toggle="collapse" 
         data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
      Bootstrap 3 Skeleton
      </a>
   </div>
   <!-- Navbar Links -->
   <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="dropdown full-width">
            <a href="#" class="dropdown-toggle" 
               data-toggle="dropdown">
            Full Width <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
               <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                  </a>
               </li>
               <li class="divider"></li>
               <li><a href="#">Separated link</a></li>
               <li class="divider"></li>
               <li><a href="#">One more separated link</a></li>
            </ul>
         </li>
         <li class="dropdown full-width">
            <a href="#" class="dropdown-toggle" 
               data-toggle="dropdown">
            Full Width <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
               <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                  </a>
               </li>
               <li class="divider"></li>
               <li><a href="#">Separated link</a></li>
               <li class="divider"></li>
               <li><a href="#">One more separated link</a></li>
            </ul>
         </li>
         <li class="dropdown full-width">
            <a href="#" class="dropdown-toggle" 
               data-toggle="dropdown">
            Full Width <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
               <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                  </a>
               </li>
               <li class="divider"></li>
               <li><a href="#">Separated link</a></li>
               <li class="divider"></li>
               <li><a href="#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</div>

javascript

$('.dropdown').hover(
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
    }, 
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
    }
);
$('.dropdown-menu').hover(
    function() {
        $(this).stop(true, true);
    },
    function() {
        $(this).stop(true, true).delay(200).fadeOut();
    }
);

看看这把小提琴：

要实现这种效果，

。下拉菜单

需要是静态的，而且

下拉切换

需要有一个固定的宽度

.dropdown-menu{
  position: static;
}

.dropdown.full-width {
  width : 120px;
}

---

你能创建一个提琴吗？请检查这里的提琴，他们没有使下拉元素本身全宽。他们正在扩展父元素的高度以包含下拉元素。是的，我知道…我以前尝试过，但是在这个解决方案中，无论发生什么情况，下拉列表中的文本总是向左对齐。我希望在鼠标悬停时，每个下拉按钮中的文本显示在其按钮下方，如中所示

.dropdown-menu{
  position: static;
}

.dropdown.full-width {
  width : 120px;
}