Bootstrap Navbar Menu Not Working Well After Hamburger Button Clicked - asp.net-mvc

Question

Here's the normal size and view of the menu
And this is the view after reducing the size
I mean in the second view the dropdowns should be listed downhills. But in the small navbar, it only adds the hamburger button. The others remains the same.
(I cencored the corporative names. The shapes don't mean anything.)
Here are the codes i use for layout.
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>
<img src="~/Content/logo.png" alt="Ana Sayfa" />
</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
#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>
Styles
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

EDIT: you are using the library KendoMenu and it possibly adding class (and CSS) into your menu div.
In order to keep li into display block you can use the following code
.nav > li
{
position: relative !important;
display: block !important;
}
The !important; will lock this CSS property from any future changes.