htmlの階層をホバーに基づいて表示する

Question

与えられたhtmlスクリプトは、メインメニューの下に階層を作成します。メインメニューにカーソルを置くと、下の3つのフィールドが表示されるようなホバーを実装したいと思います。助けてくれてありがとう。

<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

この効果を実装するための最良かつ最も簡単な方法は、ブートストラップを使用している、あなたは、折りたたみ可能なリスト、アコーディオンなどを使用することができ、そうでなければ、あなたがあなた自身のjQuery関数を記述する必要があり、このリンク https://www.w3schools.com/bootstrap/bootstrap_collapse.asp を参照してください。

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>