Accordion Vertical Navigation

Question

I was looking for an answer, but either the question is a little different, either I can not get the code to work in the list, or it is so complicated that I just copy and paste at the end - which is clearly not what I want.

What I'm looking for (a fairly beginner question, I think) is how to hide and expand the "work" drop-down list, for example, on an accordion. Here is the fiddle: 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>

From what I put together, it has something to do with changing the height of the drop down UL in order to “fake” hide it, but apart from that, I'm at a dead end.

Any help is greatly appreciated. I must clarify that I would prefer only CSS.

Answer 1

, CSS, jQuery ( ). CSS . jsFiddle.

.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 2

. .

CSS-

CSS

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

jQuery Fiddle

JQuery

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

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

---

:

---

Answer 5

css-

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

Answer 6

2 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/