CSSを使ってnavメニューを切り替えるには？

Question

純粋なCSSを使ってnav liをトグルするホバー上のトランジションを作成することはできますか？

私はCategorieという名前のliを作成しました。私ので、各カテゴリには、新しいliを取得し、私のデータベースにいくつかのカテゴリがあります。

<ul id="categorie"> 
    <li><a href="?control=bezoeker&action=categorie">Categorie</a> 
    <ul> 
     <?php foreach($categorieen as $categorie):?> 
     <li><a href="?control=bezoeker&action=category&aid=<?= $categorie->getId();?>"> 
     <?= $categorie->getNaam();?></a></li> 
     <?php endforeach;?> 
    </ul> 
    </li> 
</ul> 

だから私は「Categorie」オフを切り替えたいというようにホバー上の他のすべてのサブ李さん

を見ることができます私はホバーにtransition: 500ms ease-out 1s;を追加しようとしましたが、うまくいきませんでした。これを達成する別の方法がありますか？または、jQueryを使用する必要がありますか？

私のトグルのonClickではない、それはホバー上にあるので、この質問は、重複

Answer 1

はい、

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown .dropdown-content { 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
    overflow: hidden; 
 
    -webkit-transition: all 0.5s; /* Safari */ 
 
    transition: all 0.5s; 
 
    height: 0; 
 
    opacity: 0; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    -webkit-transition: height 0.5s; /* Safari */ 
 
    transition: height 0.5s; 
 
    height: 40px; 
 
    opacity: 1; 
 
}

<h2>Hoverable Dropdown</h2> 
 
<p>Move the mouse over the text below to open the dropdown content.</p> 
 

 
<div class="dropdown"> 
 
    <span>Mouse over me to slide down</span> 
 
    <div class="dropdown-content"> 
 
    <p>Hello World!</p> 
 
    </div> 
 
</div>

Reference