使html中的层次结构基于悬停出现

Question

给定的html脚本在主菜单下创建一个层次结构。我想实现一个悬停，这样当我将光标放在主菜单上时，最下面的三个字段出现。请大家帮忙并多谢。

<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

来实现这种效果是引导，你可以使用可折叠的列表，手风琴等，最好和最简单的方法，请访问以下链接 https://www.w3schools.com/bootstrap/bootstrap_collapse.asp 否则，你应该写自己的jQuery函数。

Answer 3

用纯css解决方案。

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