Html 通过css将主菜单项替换为子菜单项？

我写了一个简单的垂直菜单，比如：

Home  Information  Info

我想知道，当项目处于活动状态时，是否可以用自己的子列表替换列表元素。当项目处于活动状态时，我尝试将

Home

替换为

Sub1

和

Sub2

，以便修改导航，如下所示：

Sub1 Sub2 | Information  Info

有没有办法通过css实现这一点

---

加成

---

---

首先需要将

.subnav

元素放入

li

元素中，如：

<ul class="nav">
    <li class="with-subnav"><a href="#">Home</a>
        <ul class="subnav">
            <li><a href="#">Home Sub 1</a></li>
            <li><a href="#">Home Sub 2</a></li>
        </ul>
    </li>
    <li><a href="#">Informations</a></li>
    <li><a href="#">Contact</a></li>
</ul>

更新：

也许您希望元素水平排列，如下所示：

ul.subnav li{
    float: left;
}

最终解决方案：

---

最终解决问题的解决方案是将这两个类连接起来（

active

和

与subnav

）：）

你想要点什么吗？太好了！谢谢为完整起见：单击元素时是否可以获得垂直元素？非常感谢！我认为这应该解决我的问题。我将检查它是否也适用于活动元素而不是悬停。我最终将这两个类连接起来（

active

和

与subnav

）：为了使其工作-如果您愿意，请随意将其添加到您的答案中。。。再次感谢！当然，已经UVed:）因为我要求替换，而不是悬停，答案可能有点面向未来的访问者，将当前解决方案添加到您的答案中可能是个好主意，但如果您出于任何原因不喜欢，我也可以将其添加到我的问题中。。。你觉得呢？我觉得你的评论对未来的访客来说已经足够了。但你的解决方案也被添加到了答案中。快乐编码！

<ul class="nav">
    <li class="with-subnav"><a href="#">Home</a>
        <ul class="subnav">
            <li><a href="#">Home Sub 1</a></li>
            <li><a href="#">Home Sub 2</a></li>
        </ul>
    </li>
    <li><a href="#">Informations</a></li>
    <li><a href="#">Contact</a></li>
</ul>

ul.nav > li.with-subnav:hover > a{
    display:none;
}

ul.nav li:hover ul.subnav{
    display:block;
}

ul.subnav li{
    float: left;
}