Menu items with drop down sub menu items using razor in MVC not coming properly

Question

Problem Statement:

Creating Menu items with Sub menu-items using Razor(CSHTML) in MVC. I have written the html code correctly using ul and li. It is coming fine.Some formatting issue.

But instead of horizontal menu items it is coming vertical menu items and sub menu items are coming horizontal..I want horizontal menu items with vertical dropdown like sub menu items.

What i'm doing wrong in CSS??

CSHTML in 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;
        }

Solution

I solved the issue which i was facing in alligning Menu and sub menu items by using Position as absolute.

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

}