Bootstrap导航栏链接宽度意外扩展

Question

我有以下导航:

当我点击菜单项时,我得到以下内容:

问题是当我点击菜单链接时.链接容器继承下拉菜单的宽度.无论如何我可以用纯css解决方案禁用它吗？

我正在使用bootstrap 3.4.

我的导航的想法是下拉菜单增加导航div的高度.通过将下拉菜单设置为position:relative.父菜单项继承它的宽度.我很困惑为什么会这样做.有办法防止这种情况吗？

提前致谢.如果您需要更多详细信息,请与我们联系.

这是一个jsFiddle.

这是当前的标记:

<ul class="nav navbar-nav navbar-right">
        <li class="first expanded dropdown menu-4929 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4929 active" data-toggle="dropdown">About Us</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4936 active"><a href="/" title="" class="menu-4936 active">The Museum</a></li>
                <li class="leaf menu-4937 active"><a href="/" title="" class="menu-4937 active">The Design</a></li>
                <li class="leaf menu-4938 active"><a href="/" title="" class="menu-4938 active">Our Team</a></li>
                <li class="last leaf menu-4939 active"><a href="/" title="" class="menu-4939 active">Work Opportunities</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4930"><a href="/the-collection" title="" data-target="#" class="dropdown-toggle menu-4930" data-toggle="dropdown">Collection</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4943 active"><a href="/" title="" class="menu-4943 active">Steam Launches</a></li>
                <li class="leaf menu-4942 active"><a href="/" title="" class="menu-4942 active">Sailing Boats</a></li>
                <li class="leaf menu-4941 active"><a href="/" title="" class="menu-4941 active">Motorboats</a></li>
                <li class="leaf menu-4940 active"><a href="/" title="" class="menu-4940 active">Racing Boats</a></li>
                <li class="leaf menu-4944 active"><a href="/" title="" class="menu-4944 active">Other Boats</a></li>
                <li class="last leaf menu-4945 active"><a href="/" title="" class="menu-4945 active">Conservation</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4931"><a href="/collection" title="" data-target="#" class="dropdown-toggle menu-4931" data-toggle="dropdown">What's On</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4946 active"><a href="/" title="" class="menu-4946 active">Today</a></li>
                <li class="leaf menu-4947 active"><a href="/" title="" class="menu-4947 active">Next 7 Days</a></li>
                <li class="last leaf menu-4948 active"><a href="/" title="" class="menu-4948 active">Next 30 Days</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4932 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4932 active" data-toggle="dropdown">Support us</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4949 active"><a href="/" title="" class="menu-4949 active">Build the Museum</a></li>
                <li class="leaf menu-4950 active"><a href="/" title="" class="menu-4950 active">The Jetty Appeal</a></li>
                <li class="last leaf menu-4951 active"><a href="/" title="" class="menu-4951 active">One Million for the Museum</a></li>
            </ul>
        </li>
        <li class="leaf menu-4933 active"><a href="/" title="" class="menu-4933 active">News</a></li>
        <li class="leaf menu-4934 active"><a href="/" title="" class="menu-4934 active">Blog</a></li>
        <li class="last leaf menu-4935 active"><a href="/" class="menu-4935 active"><span class="icons-search"></span><span class="icons-search-red"></span>Search</a></li>
    </ul>

Answer 1

而不是position: relative;添加position: absolute;到.dropdown-menu类

ul.dropdown-menu {
  position: absolute;
}

演示