строка меню cs html не отображается так, как я хочу - PullRequest
0 голосов
/ 06 января 2020

Я хочу иметь ту же строку меню, что и в w3school, которую можно найти здесь https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar.

Однако моя выглядит не так. Моя выглядит так. My menu bar

Вот сгенерированный мной html

<body style="">

                                <div class="sidebar-menu">
                                   <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Home
                </a>
            </li>
                       <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    About Us
                </a>
            </li>

            </ul>
           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Company Profile
                </a>
            </li>

            </ul>

            </ul>
           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/InventoryLocation/Index">
                    Inventory location
                </a>
            </li>
                       <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Sale/Sale">
                    Add Invoice
                </a>
            </li>

            </ul>
           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Update Invice
                </a>
            </li>
                       <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Update Invice 1
                </a>
            </li>
                       <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Update Invice 2
                </a>
            </li>

            </ul>

            </ul>

            </ul>
           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Delete Invoice
                </a>
            </li>

            </ul>

            </ul>
           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Report/Report">
                    Report
                </a>
            </li>
                       <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Daily Report
                </a>
            </li>

            </ul>
           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/Home/Index">
                    Monthly Report
                </a>
            </li>

            </ul>

            </ul>

                    </div>

        <div class="container body-content">

Вот как я сгенерировал html в cs html файл.

   @helper GetTreeMenus(IEnumerable<erp_colombia.Models.MenuMaster> siteMenu, Nullable<int> parentID)
    {
            foreach (var i in siteMenu.Where(a => a.ParentID.Equals(parentID)))
            {
            var submenu = siteMenu.Where(a => a.ParentID.Equals(i.MenuID)).Count();

            string action = i.ActionName;
            string controller = i.ControllerName;

           <ul class="treeview-menu">
            <li class="treeview">
                <a href="/@i.ControllerName/@i.ActionName">
                    @i.MenuText
                </a>
            </li>
            @GetTreeMenus(siteMenu, i.MenuID)
            </ul>
            }
            }
            @{
                if (Session["MenuList"] != null)
                {
                    <div class="sidebar-menu">
                        @GetTreeMenus(Session["MenuList"] as IEnumerable<erp_colombia.Models.MenuMaster>, 0)
                    </div>
                }
            }

И, конечно, вот мой css.

.treeview-menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.treeview a {
    float: left;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.treeview a:hover {
    background-color: red;
    float: left;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

Любая помощь будет оценена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...