HTML、CSS、JS対応のドロップダウンメニュー

Question

まず、文法上の間違いをお詫びしたいと思います。 私の問題は、CSSとJavaScriptを使ってHTMLでレスポンシブなドロップダウンメニューを作ったのですが、ウェブページを600pxより小さくすると、ドロップダウン部分を除いてすべてが機能します。 "Kezdőlap"、 "Rajzok"、 "Festmények"などがありますが、 "Fekete-fehérgrafiká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"); 
} 

Answer 1

あなたは

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

と、リスト内の最初のではない任意の liを隠しています

他のliを表示するには、それを変更する必要があります。