菜單在IE中的行為有所不同

Question

我正在一個可以在Chrome上正常工作的網站上，但是在Internet Explorer中打開它卻發現導航菜單不正確。

研究此問題后，發現並非所有列表項都包裝在主ul中，並且2個列表項沒有正確的類。

有問題的一個：

正確的：

我的項目是使用ASP.NET MVC 4和Umbraco CMS制作的。 菜單視圖如下所示：

<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>

這在Chrome中正常運行，似乎無法找到IE的問題。

Answer 1

您應該為每個子菜單都有一個新的列表項，而不是將所有子菜單都包裝在一個列表項中（或者嵌套列表項，而不用ul包裝器將它們分成適當的嵌套列表）。

<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>