Hi, Today we are going to create a simple dropdown horizontal menu with HTML, CSS, jQuery. To make this tutorial simple we will use must needed CSS & jQuery.

First of all you need to create HTML menu as follows:

 

In the above html we have unordered list which have nested unordered lists. Main <ul>- elements has its id “menu”.

At this step our menu will look like:

simple horizontal dropdown menu in html css jquery

Now we will apply some css to make the menu horizontal and make the nested <ul> elements positioned correctly. Following css used for it:

 

This will hide the nested <ul> elements only first level <ul> element will be visible to us. At this stage our dropdown will not work. Because we have not implemented any jQuery on it.

Now last step is to apply some jQuery to show and hide the dropdown. To apply jQuery we must have jQuery script included on our page. To include jQuery you can use the following methods:

Method 1
Download jQuery file version 1.11.1 from here or version 2.1 from here please note that 2.x version will not work with IE 6,7 and 8. Then include the jQuery file on top of page using following code in <head> tag.

Method 2

Or you can just include the jQuery using jQuery CDN but it required internet even in development stage. For it you can use the following code in your tag.

For version 1.11.1:

For version 2.1.1:

Don’t include both versions of jQuery as it can clash at some places in code. Following is the jQuery Code which we will use to make the dropdown working:

That’s all. Now our dropdown menu will run smoothly.

Demo

To download complete code just use “Save File As” option.

Simple horizontal dropdown menu in HTML, CSS & jQuery UG ArticlesjQueryProgramming,,
Hi, Today we are going to create a simple dropdown horizontal menu with HTML, CSS, jQuery. To make this tutorial simple we will use must needed CSS & jQuery. First of all you need to create HTML menu as follows:   In the above html we have unordered list which have nested...
Hi, Today we are going to create a simple dropdown horizontal menu with HTML, CSS, jQuery. To make this tutorial simple we will use must needed CSS & jQuery. First of all you need to create HTML menu as follows: [crayon-59e899e080521419890333/]   In the above html we have unordered list which have nested unordered lists. Main <ul>- elements has its id "menu". At this step our menu will look like: <a href="http://www.grasphub.com/wp-content/uploads/2014/09/1.png"><img class="aligncenter size-full wp-image-2795" src="http://www.grasphub.com/wp-content/uploads/2014/09/1.png" alt="simple horizontal dropdown menu in html css jquery" width="279" height="215" /></a> Now we will apply some css to make the menu horizontal and make the nested <ul> elements positioned correctly. Following css used for it: [crayon-59e899e080539243608841/]   This will <strong>hide the nested <ul></strong> elements only first level<strong> <ul></strong> element will be visible to us. At this stage our dropdown will not work. Because we have not implemented any jQuery on it. Now last step is to apply some <strong>jQuery</strong> to show and hide the dropdown. To apply jQuery we must have jQuery script included on our page. To include jQuery you can use the following methods: <strong>Method 1</strong> Download jQuery file version 1.11.1 from <a href="http://code.jquery.com/jquery-1.11.1.min.js" target="_blank">here</a> or version 2.1 from <a href="http://code.jquery.com/jquery-2.1.1.min.js" target="_blank">here</a> <i>please note that 2.x version will not work with IE 6,7 and 8</i>. Then include the jQuery file on top of page using following code in <strong><head></strong> tag. [crayon-59e899e080540676504614/] <strong>Method 2</strong> Or you can just include the jQuery using jQuery CDN but it required internet even in development stage. For it you can use the following code in your tag. For version 1.11.1: [crayon-59e899e080546176925493/] For version 2.1.1: [crayon-59e899e08054a899721801/] Don't include both versions of jQuery as it can clash at some places in code. Following is the jQuery Code which we will use to make the dropdown working: [crayon-59e899e080550335646392/] That's all. Now our dropdown menu will run smoothly. <h1> <a href="http://www.grasphub.com/wp-content/uploads/2014/09/index.html" target="_blank">Demo</a></h1> To download complete code just use "Save File As" option.