пунктов меню с выпадающими пунктами подменят, используя бритву в MVC не подходит правильно

Question

Постановки задачи:

Создания пунктов меню с Субом меню-элементами, используя бритву (CSHTML) в MVC. Я правильно написал html-код, используя ul и li. Он подходит отлично. Некоторая проблема форматирования.

Но вместо горизонтальных пунктов меню идут вертикальные пункты меню, а пункты подменю идут горизонтально. Мне нужны горизонтальные пункты меню с вертикальным выпадающим списком, как элементы подменю.

Что я делаю неправильно в CSS?

CSHTML в Razor:

<nav> 
     <ul id="menu" > 
      <li class="submenu">@Html.ActionLink("Admin", "Index", "Home") 
       <ul> 
        <li>@Html.ActionLink("Country", "Index", "Home")</li> 
        <li>@Html.ActionLink("State", "Index", "Home")</li> 
        <li>@Html.ActionLink("City", "Index", "Home")</li> 
        <li>@Html.ActionLink("Controls", "Index", "Home")</li> 
       </ul> 
      </li> 
      <li class="submenu">@Html.ActionLink("Masters", "Index", "Home") 
       <ul> 
        <li>@Html.ActionLink("Accessories", "Index", "Home")</li> 
        <li>@Html.ActionLink("Asset Type", "Index", "Home")</li> 
        <li>@Html.ActionLink("Asset", "Index", "Home")</li> 
        <li>@Html.ActionLink("Business Unit", "Index", "Home")</li> 
       </ul> 
      </li> 
      <li class="submenu">@Html.ActionLink("Acquire", "Index", "Home") 
      <ul> 
       <li>@Html.ActionLink("Acquire Assets", "Index", "Home")</li> 
       <li>@Html.ActionLink("Asset Status", "Index", "Home")</li> 
       <li>@Html.ActionLink("Audit", "Index", "Home")</li> 
      </ul> 
      </li> 
      <li class="submenu">@Html.ActionLink("Management", "Index", "Home") 
       <ul> 
       <li>@Html.ActionLink("Deploy", "Index", "Home")</li> 
       <li>@Html.ActionLink("Return", "Index", "Home")</li> 
       </ul> 
      </li> 
      <li class="submenu">@Html.ActionLink("Maintenance", "Index", "Home") 
       <ul> 
         <li>@Html.ActionLink("Upgrade", "Index", "Home")</li> 
         <li>@Html.ActionLink("Reports", "Index", "Home")</li> 
       </ul> 
      </li> 
     </ul>    
</nav> 

CSS:

ul#menu 
    { 
     font-size: 1.3em; 
     font-weight: 600; 
     margin: 0 0 5px; 
     padding: 0; 
     text-align: right; 
    } 

     ul#menu li 
     { 
      display: inline; 
      list-style: none; 
      padding-left: 5px; 
      margin: 0; 
     } 

      ul#menu li a 
      { 
       background: none; 
       color: #999; 
       text-decoration: none; 
      } 

       ul#menu li a:hover 
       { 
        color: #333; 
        text-decoration: none; 
       } 

    ul#menu, ul.menu ul 
    { 
     display: block; 
     margin: 0; 
     padding: 0; 
    } 

     ul#menu li 
     { 
      display: inline; 
      list-style: none; 
      margin: 0; 
      padding-right: 1.5em; 
     } 

      ul#menu li ul 
      { 
       visibility: hidden; 
      } 

      ul#menu li.submenu:hover ul 
      { 
       visibility: visible; 
      } 
    nav 
     { 
      margin-bottom: 5px; 
     } 
    ul#menu 
    { 
     margin: 0; 
     padding: 0; 
     text-align: center; 
    } 

     ul#menu li 
     { 
      margin: 0; 
      padding: 0; 
     } 

Answer 1

Я решил вопрос, который я столкнулся в alligning меню и подменю пунктов меню с помощью позиции в качестве абсолюта.

ul#menu li ul { 
    display: none; 
    height: auto; 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    position: absolute; 
    width: 225px; 
    z-index: 200; 

} 

Answer 2

Следующий код хорошо работает для многоуровневого меню. CSS: .dropdown-submenu { позиция: относительная; }

.dropdown-submenu .dropdown-menu 
    { 
     top: 0; 
     left: 100%; 
     margin-top: -1px; 
    } 
</style> 

Сценарий:

<script> 
    $(document).ready(function() { 
     $('.dropdown-submenu a.submenu').on("click", function (e) { 
      $(this).next('ul').toggle(); 
      e.stopPropagation(); 
      e.preventDefault(); 
     }); 
    }); 
</script> 

HTML:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <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> 
      @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse navbar-left"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span 
        class="glyphicon glyphicon-cog"></span>Settings<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a>q</a></li> 
         <li><a>qwq</a></li> 
         <li><a>eeq</a></li> 
         <li class="dropdown-submenu"><a href="#" class="submenu" data-toggle="dropdown"><span 
          class="glyphicon glyphicon-cog"></span>Sub Settings<b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a>g</a></li> 
           <li><a>qq</a></li> 
           <li><a>wqw</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <div class="navbar-collapse collapse navbar-right"> 
      @Html.Partial("_LoginPartial") 
     </div> 
    </div> 
</div>