Я хочу иметь ту же строку меню, что и в w3school, которую можно найти здесь https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar.
Однако моя выглядит не так. Моя выглядит так. ![My menu bar](https://i.stack.imgur.com/C2V8O.png)
Вот сгенерированный мной 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;
}
Любая помощь будет оценена.