如何使用 CSS 切换导航菜单？ [复制]

Question

是否可以在悬停时创建一个过渡，用纯 css 切换导航栏？

我创建了一个名为 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>

所以我想关闭“类别”并在悬停时打开，这样您就可以看到所有其他子 li 的

我尝试在悬停时添加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