创建一个多层次的megamenu

如何解决创建一个多层次的megamenu

我正在尝试创建一个多层次的 megamenu。问题是，当我将鼠标悬停在 2 级导航（左子菜单导航）上时，它并不总是正确显示 3 级导航（右子菜单导航）。部分 3 级导航链接会显示，部分不会显示。

megamenu 的另一个问题是，当我将鼠标悬停在导航级别 2 中的第二个链接上时，级别 3 导航中的链接将在与导航中的第二个链接相同的位置开始2 级 - 他们应该从顶部开始。问题如下图所示：

第三个问题是3级导航和2级导航的高度不一样。

这是我目前的代码：

HTML：

<!-- Top menu -->
<div class="top-menu">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Programming</a>

            <!-- Submenu level 1 -->
            <ul class="submenu-level-1">
                <li>
                    <a href="#">Backend</a>

                    <!-- Submenu level 2 -->
                    <ul class="submenu-level-2">
                        <li>
                            <a href="#">PHP</a>
                        </li>
                        <li>
                            <a href="#">Java</a>
                        </li>
                        <li>
                            <a href="#">Python</a>
                        </li>  
                        <li>
                            <a href="#">C#</a>
                        </li>                                                        
                    </ul>

                </li>
                <li>
                    <a href="#">Frontend</a>

                    <!-- Submenu level 2 -->
                    <ul class="submenu-level-2">
                        <li>
                            <a href="#">HTML</a>
                        </li>
                        <li>
                            <a href="#">CSS</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>                            
                    </ul>

                </li>
            </ul>                
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">Contact us</a>
        </li>
        <li>
            <a href="#">About us</a>
        </li>
    </ul>
</div>

CSS：

/* TOP MENU */
.top-menu ul {
    list-style-type:none;
}

.top-menu > ul {
    display: inline-block;
    position: relative;
}

.top-menu > ul > li {
    float: left;
}

.top-menu li {
    background-color: lightgrey;
}

/* The following rules will apply to all <a> elements in both the top-menu & sub-menus */
.top-menu ul a {
    text-decoration: none;
    color: black;
    text-align: center;
    display: block;
}

.top-menu > ul > li > a {
    padding: 16px 24px 16px 24px;
}

.top-menu ul a:hover {
    background-color: black;
    color: white;    
}

/* Hide submenu-level-1 & submenu-level-2 as default */
.top-menu .submenu-level-1,.top-menu .submenu-level-2 {
    display: none;
}

/* SUBMENU-LEVEL-1 */
.top-menu ul li:hover > .submenu-level-1 {
    display: block;
}

.top-menu .submenu-level-1 {    
    position: absolute;
    left: 0px;
    right: 0px;
}

.top-menu .submenu-level-1 > li {   
    background-color: #c1c1c1;
}

.top-menu .submenu-level-1 li {
    position: relative;
}

.top-menu .submenu-level-1 a {
    width: 25%;
}

/* SUBMENU-LEVEL-2 */
.top-menu .submenu-level-1 li:hover > .submenu-level-2 {
    display: block;
}

.top-menu .submenu-level-2 {
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 25%;
    width: 75%;
}

.top-menu .submenu-level-2 li {
    background-color: #f1f1f1;
    /* width: 75%; */
}