阅读许多帖子后遇到我的第三个导航子菜单的问题

Question

我的第二个子菜单就像一个超级按钮一样工作，但我无法使第三个子菜单正常工作。以下是其工作方式。逻辑应该与第一个子菜单相同，而不是第二个？子菜单2是第一个子菜单的下一个子菜单。第一个子菜单样式起作用。但是第二个子菜单就像显示一样工作，但是在我拖动鼠标并将鼠标悬停在应该打开的li标签上之前会打开。

第二个子菜单的逻辑有何不同？我读了很多文章，看到了他们这样做的许多方式。我尝试在子菜单css中包含> ul等。我觉得我试图使用其他人的代码，昨天和今天整天都在猜测。我不确定为什么第一个子菜单可以正常工作，然后我将相同的逻辑用于下一个子菜单。我可以看到它已经关闭，因为它在第一部分上悬停后显示为打开，但是在第一子菜单上悬停并打开的功能不起作用。我该如何解决？请帮忙。谢谢。

外观如何：

菜单

0
0
0-->0
    0   
    0-->0
        0
        0

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="SLG" aria-expanded="false">
                            Sales <span class="caret" style="border-top: 4px solid white"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="Customer Email">
                            <li><a class="dropdown-item" href="http://apps.mark.com/mochub2/sales/">Sales Dashboard</a></li>
                            <li><a class="dropdown-item" href="http://apps.mark.com/mochub2/SLG/SLGOverview">SLG Main</a></li>
                            <li>@Html.ActionLink("SLG", "Index", "SLG")</li>
                            <li class="sub-menu">
                                @Html.ActionLink("SLG", "CreateAdmin", "SLG")
                                <ul class="dropdown-menu">
                                    <li>@Html.ActionLink("SLG Store", "Index", "SLG")</li>
                                    <li><a class="dropdown-item" href="http://http://apps.mark.com/mochub2/SLG/SLGOverview">SLG Dashboard</a></li>
                                    @if (User.IsInRole("WFL_APP_MOCHUB-Admins") || User.IsInRole("WFL_APP_SLG-Admins"))
                                    {
                                        <li class="sub-menu2">
                                            @Html.ActionLink("SLG Admin", "CreateAdmin", "SLG")
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="http://http://apps.mark.com/mochub2/SLG/SLGOverview">SLG Main</a></li>
                                                <li>@Html.ActionLink("Permissions", "Permissions", "SLG")</li>
                                                <li>@Html.ActionLink("SLG Create Week", "CreateAdmin", "SLG")</li>
                                            </ul>
                                        </li>
                                    }
                                </ul>
                            </li>  
                        </ul>
                    </li>

<style>
    li.sub-menu {
        position: relative;
    }

        li.sub-menu span.glyphicon {
            font-size: 0.7em;
        }

        li.sub-menu:hover .dropdown-menu {
            display: block;
            top: 0;
            left: 100%;
        }


        PROBLEM IS BELOW HERE


li.sub-menu2 > ul {
  position: absolute;
  top: 100px !important;
  border: thin !important;
  display: none;
  top: 0;
  background-color: #F5F5F5;
}

li.sub-menu2 > ul span.glyphicon {
  font-size: 0.7em;
  background: #068;
  border: thin !important;
  background-color: #F5F5F5;
}

    li.sub-menu2:hover > ul {
      display: block;
      position: absolute;
      left: 100%;
      border-left: solid 3px #fff;
      border: thin !important;
      top: 0;
      width: auto;
      background-color: #F5F5F5;
    }
        </style>