CODEWITHSUNDEEP
javascripthtmlcssmenu
Benjamin
Benjamin

Reputation: 246

Vertical menu css3

I am stuck on the creation of a vertical menu with submenu:

<ul>
    <li>Home</li>
    <li>Pages
        <ul>
            <li>Subpage</li>
            <li>Subpage 2</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

Clicking on "Pages" the menu should be something similar to this:

enter image description here

Upvotes: 1

Views: 687

Answers (2)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

Try This

  1. use this CSS:

    ul{
    list-style:none;
}
ul li ul{
    list-style:none;
    display:none;
}

  2. apply jQuery library and this function:

    $(document).ready(function(){
    $("ul li").click(function(){
        $(this).children('ul').show();
    });
});

Upvotes: -2

user625860
user625860

Reputation:

The basic mechanic can be achieved like this:

ul li ul {
  display: none;
  margin-left: 20px;
}

li:hover ul {
  display: block;
}

jsFiddle: http://jsfiddle.net/elias94xx/sCXus/

Without the use of images it's somewhat tricky to achieve the effect in your images above, but I got a decent example working:

css menu tree

jsFiddle: http://jsfiddle.net/elias94xx/sCXus/5/

Upvotes: 3

Related Questions