I'm working on a site that works as expected in Chrome but opening it in Internet Explorer a see that the navigation menu is out of place.
Investigating the problem a saw that not all the list items are wrapped inside the main ul and 2 list items do not have the correct class.
The one with the problem:
The correct one:
My project is made using ASP.NET MVC 4 and Umbraco CMS. The menu View looks like this:
<ul class="nav">
<li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
@foreach (var item in menuItems)
{
<li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="@item.Url">@item.Name</a>
@{ var subMenuItems = item.Children.Where("Visible"); }
@if (subMenuItems.Count() > 0)
{
<ul>
<li>
@foreach (var sub in subMenuItems)
{
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<a href="@sub.Url"><img src="@Umbraco.Field(sub, "menuItemImage", recursive: true)"></a>
</div>
<div class="NavItemDesc">
<a href="@sub.Url">
<span>@sub.Name</span><br>
<span>@sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<li><a class="parent" href="@sub.Url">@sub.Name</a></li>}
}
</li>
</ul>
}
</li>
}
</ul>
This works fine in Chrome, and cant seem to find the problem for IE.
You should have a new list item for each submenu rather than wrapping all the submenus in one list item (or otherwise nesting list items without separating them into proper nested lists with a ul
wrapper).
<ul class="nav">
<li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
@foreach (var item in menuItems)
{
<li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="@item.Url">@item.Name</a>
@{ var subMenuItems = item.Children.Where("Visible"); }
@if (subMenuItems.Count() > 0)
{
<ul>
@foreach (var sub in subMenuItems)
{
<li>
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<a href="@sub.Url"><img src="@Umbraco.Field(sub, "menuItemImage", recursive: true)"></a>
</div>
<div class="NavItemDesc">
<a href="@sub.Url">
<span>@sub.Name</span><br>
<span>@sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<a class="parent" href="@sub.Url">@sub.Name</a>}
</li>
}
</ul>
}
</li>
}
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.