Erstellen der Hierarchie in HTML basierend auf Hover

Question

Das angegebene HTML-Skript erstellt eine Hierarchie unter dem Hauptmenü. Ich möchte einen Hover so implementieren, dass, wenn ich den Cursor auf das Hauptmenü setze, die unteren drei Felder erscheinen. Bitte helfen und vielen Dank.

<li class="linkCMSListMenuLI" style=""><a 
href="/Inv/Fs.aspx" 
class="linkCMS" style="" >Main Menu</a> 

<ul> 
    <li><a href="#">Menu 2.1</a></li> 
    <li><a href="#">Menu 2.2</a></li> 
    <li><a href="#">Menu 2.3</a></li> 
    </ul> 
    </li> 

Answer 1

li>ul{ 
 
    display: none; 
 
} 
 
li:hover>ul{ 
 
    display: block; 
 
}

<li><a>Main Menu</a> 
 
    <ul> 
 
    <li><a href="#">Menu 2.1</a> 
 
     <ul> 
 
      <li><a href="#">Menu 2.1.1</a></li> 
 
      <li><a href="#">Menu 2.1.2</a></li> 
 
      <li><a href="#">Menu 2.1.3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 2.2</a></li> 
 
    <li><a href="#">Menu 2.3</a></li> 
 
    </ul> 
 
</li>

Answer 2

Der beste und einfachste Weg, um diesen Effekt zu implementieren ist Bootstrap verwenden, können Sie zusammenklappbar Listen verwenden, Akkordeon, usw. finden Sie auf diesen Link https://www.w3schools.com/bootstrap/bootstrap_collapse.asp Andernfalls sollten Sie Ihre eigene jQuery-Funktion schreiben.

Answer 3

Mit reiner CSS-Lösung.

.nav { 
 
    padding: 0; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.sub-nav { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
.nav li:hover .sub-nav { 
 
    display: inline-block; 
 
}

<nav> 
 
    <ul class="nav"> 
 
    <li> main 1 
 
     <ul class="sub-nav"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>2</li> 
 
     </ul> 
 
    </li> 
 
    <li> main 2 
 
     <ul class="sub-nav"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>2</li> 
 
     </ul> 
 
    </li> 
 
    <li> main 3 
 
     <ul class="sub-nav"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>2</li> 
 
     </ul> 
 
    </li> 
 
    <ul> 
 
</nav>