Html 使用CSS和淡入显示菜单

我的输出：

Home  | cat | Info
      |sub1
      | sub1sub1
      | sub1sub2
      |sub2
      | sub2sub1    


<div class="menu" >
    <span>
        <ul id="nav">
            <li><a href="#" >HOME</a></li>
            <li><a href="#">cat</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><a href="#" >sub1</a></li>
                                <ul>
                                    <li><a href="#" >sub1sub1</a></li>
                                    <li> <a href="#" >sub1sub2</a></li>
                                </ul>       
                        </ul>
                        <ul>
                            <li><a href="#" >sub2</a></li>
                                <ul><li><a href="#" >sub2sub1</a></li>
                             </li>
             <li><a href="#">Info</a></li>
        </ul>
    </span>
</div>

如何使

cat

仅在CSS中可见，而不使用jquery。应该是：如果我点击

cat

，子菜单就会出现。淡入/淡出效果会很好。一般来说可能吗？

是的，你可以这样做> 试着在cat菜单中显示：无。您必须将它们放置：悬停为dislay:block

确定。

---

只需为子菜单创建一个显示为“无”的新类。这意味着该块不会自行打开。在这之后，将另一个类放入：hover并将其显示为block

如果您想在

上单击它，您可以使用
：target
伪类以及元素ID来控制可见的内容

使用指向ID的链接更新HTML中的相关行：

<li id="cat"><a href="#cat">cat</a>

您还需要删除任何将隐藏子菜单的
display:none
样式，因为我们将使用
visibility
和
opacity
。这使我们可以有一个很好的淡入淡出效果。
AFAIK，如果没有JS，您无法从不同元素上的事件影响元素的可见性。你需要js。也许不需要点击事件，但使用鼠标悬停你当然可以。这不是所有菜单都能正常工作吗？它工作得很好，您只需要从
#nav li div
块中删除
显示：无
样式。更新了我的答案以反映这一点。
<li id="cat"><a href="#cat">cat</a>

li .subs {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
li:target .subs {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}