How to create a menu tree using HTML

Question

I need to create a menu tree using HTML. I had a search on Google, but they are providing some software to download in order to create this. But I need some script and HTML tags to do this. Can anyone help me solve this problem. Thanks in advance.

Answer 1

Here is something very simple to start with.

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

EDIT

Implementing what I learned from @sushil bharwani. Here is how I found the above URL i.e. at the courtesy of @sushil bharwani http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1

Answer 2

You don't need to use JavaScript (unless you want compatibility with outdated browsers), you can achieve it with HTML+CSS alone. And in a much more semantically-correct way. :)

You can make vertical dropdown menus or (prettier example) horizontal menus using the techniques explained in the Sons of Suckerfish article at HTMLDog.
Simple and meaningful.

---

Sample

Here is a simple example. In it you can see the hover functionality working perfectly.

The CSS is not good, because it's only a sample.
To work on the style, disable the display: none; line: that will stop the submenus from hiding when not hovered, and you can work on styling everything.
When you are done, simply re-enable the display: none; line to get the submenus to hide and only show on hover.

HTML

<nav>
<p>Collapsing:</p>
<ul class="collapsable">
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
<p>Not collapsing:</p>
<ul>
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
</nav>

CSS

nav li:hover {
    background: #EEEEEE;
}
nav li>ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}
nav .collapsable li>ul {
    display: none;
}
nav li>ul::before {
    content: ": { ";
}
nav li>ul::after {
    content: " } ";
}
nav li:hover>ul {
    display: inline-block;
}
nav li>ul>li {
    display: inline-block;
}
nav li>ul>li+li::before {
    content: ", ";
}

Here is a jsfiddle: http://jsfiddle.net/x8dxv/