Html 手风琴垂直导航

我已经搜索了答案，但要么问题略有不同，要么我无法在列表中使用代码，要么，它太复杂了，我最终只是复制和粘贴-这显然不是我想要的

我正在寻找的（我认为这是一个相当初级的问题），是如何隐藏和显示“工作”下拉列表，就像在手风琴中一样。这是小提琴：

网
印刷品
插图

从我收集到的信息来看，它与改变下拉框的高度有关，以“伪装”隐藏它，但除此之外，我感到困惑

---

非常感谢您的帮助。我应该澄清我只喜欢CSS。

查看下面的演示。你可以从下面的小提琴中选择

CSS

.child{
    display:none;
}
#work:hover+.child{
    display:block;
}

JQuery

$('#work').on('click',function(){
$('.child').toggle();
});

试试这个css解决方案

.vertical-nav li ul {
    display: none;
}
.vertical-nav li:hover ul {
    display: block;
}

---

只要在CSS中添加这两行代码，就可以了

.vertical-nav li>ul{display:none;} /*new line added*/
.vertical-nav li:hover >ul{ display:block;}/*new line added*/

工作演示链接

请尝试以下代码：

.child
{
    display:none;
}
#work:hover+.child
{
    display:block;
}

---

将此添加到CSS中

.child{
    display:none;
}
#work:hover+.child{
    display:block;
}

---

---

小提琴

---

输出：

---

---

您可以使用纯CSS实现这一点，无需jQuery（包括悬停效果）。只需将这些CSS代码添加到现有代码中。这是你的护照

---

是否要访问“工作”的子菜单？？？如果是这样，你可以使用我的编码

ul li ul
{
    display:none;
}

ul li:hover ul
{
    display:block;
    list-style-type:none;
}

.vertical-nav li ul 
{
    height: 0px;
    overflow: hidden;
    transition: height 0.3s;
    -webkit-transition: height 0.3s;
    -ms-transition: height 0.3s;
}
.vertical-nav li:hover ul 
{
    height: 70px;
}