汉堡按钮单击后，Bootstrap Navbar菜单不能正常工作

Question

这是菜单的正常大小和视图

这是缩小尺寸后的视图

我的意思是在第二种观点中，下拉列表应该列在下面。但在小导航栏中，它只添加了汉堡包按钮。其他人保持不变。

（我扼杀了这些名字。这些形状并不意味着什么。）

以下是我用于布局的代码。

Layout.cshtml

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav" id="menu">
                    <li>
                        <a href="@Url.Action("Index", "Home")"><img src="~/Content/logo.png" alt="Ana Sayfa" /></a>
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Yönetim</a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Dosya Yükleme/Güncelleme</a>
                                <ul class="dropdown-menu">
                                    <!-- moving the UL to the next line will cause an IE7 problem -->
                                    <li>@Html.ActionLink("Cost Margin Yükleme", "Index", "CostMarginUpload")</li>
                                    <li>@Html.ActionLink("EK5 Tarife Yükleme", "Index", "EK5TariffUpload")</li>
                                    <li>@Html.ActionLink("ETS Sourcing Cost Yükleme", "Index", "ETSSourcingUpload")</li>
                                    <li>@Html.ActionLink("ETS Sourcing Cost Tablosu Güncelleme", "Index", "ETSSourcingCost")</li>
                                </ul>
                            </li>
                            <li>@Html.ActionLink("Kullanıcı İşlemleri", "Index", "Users")</li>
                            <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Parametresi Güncelleme</a> 
                                <ul class="dropdown-menu">
                                    <!-- moving the UL to the next line will cause an IE7 problem -->
                                    <li>@Html.ActionLink("Bölge Güncelleme", "Index", "Region")</li>
                                    <li>@Html.ActionLink("Bağlantı Tipi Güncelleme", "Index", "ConnectionTypes")</li>
                                    <li>@Html.ActionLink("Tarife Grubu Güncelleme", "Index", "TariffGroup")</li>
                                    <li>@Html.ActionLink("Profil Güncelleme", "Index", "Profile")</li>
                                    <li>@Html.ActionLink("Parametreler Tablosu Güncelleme", "Index", "Parameters")</li>
                                    <li>@Html.ActionLink("Zam Öngörüsü Girişi", "Index", "PriceIncreaseEstimates")</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Müşteri İşlemleri", "Index", "Customers")</li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Fiyatlandırma İşlemleri</a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Fiyatlandırma</a>
                                <ul class="dropdown-menu">
                                    <!-- moving the UL to the next line will cause an IE7 problem -->
                                    <li>@Html.ActionLink("Tekli Fiyatlandırma", "Index", "SinglePricing")</li>
                                    <li>@Html.ActionLink("Çoklu Fiyatlandırma", "Index", "MultiPricing")</li>
                                    <li>@Html.ActionLink("İhale İçin Fiyatlandırma", "Index", "TenderPricing")</li>
                                </ul>
                            </li>
                            <li>@Html.ActionLink("Teklif Görüntüleme", "Index", "OfferView")</li>
                            <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Teklif Performans Bilgileri</a>
                                <ul class="dropdown-menu">
                                    <!-- moving the UL to the next line will cause an IE7 problem -->
                                    <li>@Html.ActionLink("Teklif Performans Bilgisi Görüntüleme", "Index", "PerformanceView")</li>
                                    <li>@Html.ActionLink("Teklif Performans Bilgisi Sıralama", "Index", "PerformanceRank")</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li style="float:right">
                        @User.Identity.Name
                    </li>
                </ul>
            </div>
        </div>
    </nav>

脚本

 @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/kendo-js")
    @Styles.Render("~/bundles/kendo-css")

    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/css")
    @RenderSection("scripts", required: false)


    <script src="Scripts/respond.min.js"></script>

      <script>
        $(document).ready(function () {
            $("#menu").kendoMenu();
            $(document.body).css("visibility", "visible");

            $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                $(this).parent().siblings().removeClass('open');
                $(this).parent().toggleClass('open');f
            });
        });
    </script>

样式

html {
            background-color: #eeeeee;
            margin: 0px;
            padding: 0px;
        }

        body {
            visibility: hidden;
        }

        #menu h2 {
            font-size: 1em;
            text-transform: uppercase;
        }

        #template img {
            float: left;
        }

        #template {
            width: 380px;
        }

        .nav > li {
            position: relative;
            display: block;
        }

        .navbar-inverse {
            background-color: #eeeeee;
        }

        .navbar-nav {
            float: none;
        }
        .marginBottom-0 {
            margin-bottom: 0;
        }

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #cccccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:hover > a:after {
            border-left-color: #555;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

Answer 1

编辑：您正在使用KendoMenu库，它可能会在您的菜单div中添加类（和CSS）。 为了使li进入显示块，您可以使用以下代码

.nav > li 
{ 
    position: relative !important;
    display: block !important;
}

!important;将锁定此CSS属性以防将来的任何更改。