jquery - 全宽 Bootstrap 下拉菜单

Question

我正在尝试制作一个与此页面中的菜单类似的 Bootstrap 菜单。https://makr.com/

这就是我想出的，但我现在几乎卡住了。

如何使下拉文本显示在每个下拉按钮下方，就像在 https://makr.com/ 上一样

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>

自定义.css

.full-width.dropdown {
    position: static; 
}
.full-width.dropdown > .dropdown-menu {
    position: static;
    right: 0;
    left: 0;
}
.full-width.dropdown > .dropdown-menu > li > a {
    white-space: normal; 
}
.fill-width.dropdown {
     position: static;
 }
.fill-width.dropdown > .dropdown-menu {
    position: absolute;
    left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
    white-space: normal; 
}

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();
    }
);

Answer 1

看看这个 fiddle :https://jsfiddle.net/a92com1a/4/

要实现这种效果，.dropdown-menu 需要是静态的，dropdown-toggle 需要固定宽度

.dropdown-menu{
  position: static;
}

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