使用菜单中的滚动条时，子菜单未显示

Question

nav#desktop-nav ul li > ul {
    margin-top: 0;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    transition: all 0.5s ease 0s;
    width: 16em;
    z-index: 99999;
    background: #002147;
    padding: 0;
    left: -2em;
    overflow:auto;
    max-height:20em;
}
nav#desktop-nav li.has-child-menu {
    position: relative;
}
nav#desktop-nav li.has-child-menu > a {
    color: #ffffff;
}
nav#desktop-nav li.has-child-menu > a:after {
    font-family: 'FontAwesome';
    content: "\f105";
    float: right;
}
nav#desktop-nav li.has-child-menu > ul.thired-level {
    position: absolute;
    left: 240px;
    top: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    transition: all 0.5s ease 0s;
}
nav#desktop-nav li.has-child-menu > ul.thired-level li a {
    color: #ffffff;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3 ease-out;
    -ms-transition: all 3s ease-out;
    -o-transition: all 3s ease-out;
    transition: all 3s ease-out;
}
nav#desktop-nav li.has-child-menu:hover ul.thired-level {
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
}

<nav id="desktop-nav">
    <ul>
        <li>
            <a href="javascript:void(0)">Courses</a>
            <ul id="hash-li">
                <li class="top-divider"><i class="fa fa-caret-up"></i></li>
                <?php
                    $this->db->select('*');
                    $this->db->from('courses');
                    $this->db->limit(15);
                    $query = $this->db->get();
                    $result = $query->result_array();
                    foreach($result as $row)
                    {
                    echo "
                    <li class='has-child-menu'>
                        <a href='javascript:void(0)' class='link' id='".$row['id']."'>".$row['main_course_name']."</a>";
                ?>
                        <ul class="thired-level"></ul>
                    </li>
                <?php
                    }
                ?>
                <li class="bottom-divider"><i class="fa fa-caret-down"></i></li>
            </ul>
        </li>
    </ul>
</nav>

在这段代码中，我创建了一个多级菜单，但是现在使用

时会发生什么

overflow:auto;
max-height:20em;

滚动条正在显示，但是当我将鼠标悬停在菜单上时，子菜单未显示，但未使用滚动条子菜单正在显示，我对此一无所知。我在哪里做错了？那么如何解决此问题？请帮助我。

谢谢