html - Bootstrap 导航栏链接宽度意外扩大

Question

我有以下导航:

当我点击一个菜单项时，我得到以下信息:

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

我正在使用 Bootstrap 3.4。

我的导航思路是下拉菜单增加导航div的高度。通过将下拉菜单设置为 position:relative。父菜单项继承它的宽度。我对它为什么会这样做感到困惑。有办法避免这种情况吗？

提前致谢。如果您需要更多详细信息，请告诉我。

Here is a 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;
}

Demo