HTML, CSS, JS duyarlı açılır menüsü

Question

İlk olarak, dilbilgisi hatalarımdan dolayı özür dileriz. Sorunum, HTML'de CSS ve JavaScript ile duyarlı bir açılır menü yaptım, ancak web sayfasını 600 pikselden küçük yaptığımda, her şey açılır menü dışında çalışır. Menünün tüm ana bölümlerini gösterir, burada "Kezdőlap", "Rajzok", "Festmények" vb. Ancak "Fekete-fehér grafikák" ve benzeri görülmez. Yani, demek istediğim ul>li>ul>li bölümleri. 600 piksel genişliğinden daha küçük olduğunda.

Bu kodu daha iyi yapmalıyım, herşeyi göstermek için.

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

I (tam değil, ama ben sorunumu anlayabiliyorum sanırım) şöyle ki bir CSS kodunun:

@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;} 
} 

ve Yani, burada HTML parçasıdır JS:

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

Answer 1

Sen

nav li:not(:first-child) {display: none;} 

ile listede ilk değil herhangi li sakladığını

Yani diğer li gösterilmesini istiyorsanız, bunu değiştirmeniz gerekir.