La hiérarchie en html apparaît en fonction du curseur

Question

Le script html donné crée une hiérarchie sous le menu principal. Je veux mettre en place un vol stationnaire de sorte que lorsque je place mon curseur sur le menu principal, les trois derniers champs apparaissent. S'il vous plaît, aidez et merci beaucoup.

<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

La meilleure et la plus simple à mettre en œuvre cet effet utilise bootstrap, vous pouvez utiliser des listes pliantes, accordéon, etc, s'il vous plaît voir ce lien https://www.w3schools.com/bootstrap/bootstrap_collapse.asp Sinon, vous devez écrire votre propre fonction jQuery.

Answer 3

Avec une solution css pure.

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