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