HTML、CSS、JS响应下拉菜单

首先，我想为我的语法错误道歉。我的问题是，我用CSS和JavaScript在HTML中制作了一个响应式下拉菜单，但当我将网页缩小到600px以下时，除了下拉部分之外，其他一切都可以工作。它显示了菜单的所有主要部分，这里有"Kezdõlap"、"Rajzok"、"Fesmények"等。但它没有显示"Fekete fehér-grafikák"等等。所以，我指的是ul>li>ul>li部分。当宽度小于600px时。

我必须让这个代码变得更好，以显示一切。因此，这里是HTML部分：

<nav>
    <ul class="menu">
        <li><a href="#">Kezdőlap</a></li>
        <li>
            <a href="rajzok.html"><span>Rajzok</span></a>
            <ul class="menu">
                <li><a href="rajzok.html">Fekete-fehér grafikák</a></li>
                <li><a href="szinesrajzok.html">Színes képek</a></li>
                <li><a href="negative.html">Negatív rajzok</a></li>
            </ul>
        </li>
        <li>
            <a href="festmenyek.html"><span>Festmények</span></a>
            <ul>
                <li><a href="festmenyek.html">Fekete-fehér</a></li>
                <li><a href="szinesfestmenyek.html">Színes</a></li>
            </ul>
        </li>
        <li><a href="kapcs.html">Kapcsolat</a></li>
                <li><a href="insp.html">Inspiráció</a></li>
                <li><a href="other.html">Egyéb alkotások</a></li>
                <li class="ikon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
    </ul>
</nav>

我有一个CSS代码（它不是完整的，但我想你可以理解我的问题），看起来像这样：

@media (max-width:600px) {
    nav li:not(:first-child) {display: none;}
    nav li.ikon {float: right; display: inline-block;}
    nav ul.kibont {position: relative;}
    nav ul.kibont li.ikon {position: absolute; right: 0; top: 0;}
    nav ul.kibont li {float: none; display: block;}
    nav ul.kibont li a {display: block; text-align: left;} 
}

和JS:

function myFunction()
{
     document.getElementsByClassName("menu")[0].classList.toggle("kibont");
}