28/04/2014 by Nitesh

How to Create a Horizontal Hierarchical Menu Using HTML, CSS and jQuery


This is Part 2 of the series to create hierarchical menus. You can see the 1st part “How to Create a Hierarchical Menu Using HTML And CSS” here. This post will explain how to create a multi level menu using HTML, CSS and a bit of jQuery. So, lets get started.

We will use an existing plugin named “jQSimpleMenu” to create this menu. Since we’re going to use jQuery in our project, include jQuery in your project in the <head> tag. Also, you will need to include the plugin JS file jqsimplemenu.js and CSS File jqsimplemenu.css.


Now, let us create a HTML structure as below using &lt;ul&gt; and &lt;li&gt; tags. Write the below code in your HTML file where you want to place the menu. The important part here is to assign a class to the “<ul>” tag.

Once the HTML structure is ready we just need to call the plugin function to convert our HTML into a beautiful looking menu. You can do this as below –

You’re done. The complete HTML file will look something like below.

< !DOCTYPE html>



The final output of the HTML file will look like below.

Complete Source: Download

Hope you like this post! Keep learning and sharing!.