手风琴垂直导航

Question

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

我正在寻找的（我认为这是一个初学者问题），是如何隐藏和揭示“工作”下拉菜单，就像手风琴一样。这是小提琴： http://jsfiddle.net/syoban/9Z8zA/8/

<div>
<ul class="vertical-nav">
    <li class="active"><a href="#"><i1></i1>home</a>

    </li>
    <li class="has-dropdown"><a href="#"><i2></i2>about</a>

    </li>
    <li><a href="#"><i3></i3>work <icd></icd></a>

        <ul class="child">
            <li>Web</li>
            <li>Print</li>
            <li>Illustration</li>
        </ul>
    </li>
    <li><a href="#"><i4></i4>contact</a>

    </li>
</ul>

从我收集的内容来看，它与更改下拉UL的高度有关，以便“伪造”隐藏它但超出我的难度。

任何帮助非常感谢。我应该澄清一下，我只喜欢CSS。

Answer 1

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

Pure CSS Fiddle

<强> CSS

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

jQuery Fiddle

<强> JQuery的

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

Answer 2

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

.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;
}

Answer 3

试试这段代码：

<强> DEMO

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

Answer 4

将此添加到您的CSS

---

ul li ul
{
    display:none;
}

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

---

<强>小提琴

---

Fiddle Demo

<强>输出：

---

Answer 5

试试这个css解决方案

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

Answer 6

只需在CSS中添加这两行代码即可。

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

工作演示链接。 http://jsfiddle.net/kheema/9Z8zA/12/