Untermenüs werden nicht in meinem mobilen Dropdown-Menü angezeigt

Question

Auf kleinen Bildschirmen habe ich ein Hamburger-Menü, das nach unten zeigt, um einige Listenelemente anzuzeigen. Ich versuche, einigen dieser Elemente Untermenüs hinzuzufügen.

Ich habe mehrere Varianten des Einfügens von Untermenüs versucht, aber keines erscheint. Das normale Hamburger Dropdown-Menü funktioniert gut, ändert sich aber beim Hinzufügen der Untermenüs überhaupt nicht.

Hier ist die html ohne Hinzufügen von Untermenüs.

<input class="menu-btn" type="checkbox" id="menu-btn" /> 
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span> </label> 
    <ul class="menu"> 
     <li><a href="#">Getting Started</a></li> 
     <li><a href="#">Property Information</a></li> 
     <li><a href="#">Home Financing</a></li> 
     <li><a href="#">Loan Approval</a></li>  
     <li><a href="#">Loan Closing</a></li> 
     <li><a href="#">Home Ownership</a></li> 
    </ul> 

Wie würde ich ein Untermenü in einem dieser Elemente hinzufügen?

Answer 1

Fügen Sie einfach einen ul in den entsprechenden li Block wie folgt ein. Sie müssen mit dem CSS spielen, um es angemessen anzuzeigen.

HTML

<nav> 
     <ul> 
      <li><a href="#">Getting Started</a></li> 
      <li><a href="#">Property Information</a> 
       <ul> 
        <li><a href="#">Sub-Property Information</a></li> 
        <li><a href="#">Sub-Property Information 2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Home Financing</a></li> 
      <li><a href="#">Loan Approval</a></li>  
      <li><a href="#">Loan Closing</a></li> 
      <li><a href="#">Home Ownership</a></li> 
     </ul> 
    </nav> 

CSS

<style> 
     nav ul ul { 
      display: none; 
     } 
     nav ul li:hover > ul { 
      display: block; 
     } 
    </style>