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:

<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub Menu Item 2.1</a></li>
<li><a href="#">Sub Menu Item 2.2</a></li>
<li><a href="#">Sub Menu Item 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a>
<ul>
<li><a href="#">Sub Menu 4.1</a></li>
<li><a href="#">Sub Menu 4.2</a></li>
<li><a href="#">Sub Menu 4.3</a></li>
</ul>
</li>
</ul>

 

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:

#menu li{
list-style: none;
float: left;
}

#menu li ul{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
}

#menu li ul li{
float: none;
}

 

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.

<script src="jquery-1.11.1.min.js"></script>

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:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

For version 2.1.1:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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:

<script type="text/javascript">
    $(document).ready(function(){
        $('#menu > li').mouseover(function(){
            $(this).find('ul').css('visibility','visible');
        });
        $('#menu > li').mouseout(function(){
            $(this).find('ul').css('visibility','hidden');
        });
    });    
</script>

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: <ul id='menu'> <li><a href='#'>Menu Item 1</a></li> <li><a href='#'>Menu Item 2</a> <ul> <li><a href='#'>Sub Menu Item...
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: <pre class="lang:default decode:true "><ul id="menu"> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a> <ul> <li><a href="#">Sub Menu Item 2.1</a></li> <li><a href="#">Sub Menu Item 2.2</a></li> <li><a href="#">Sub Menu Item 2.3</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a> <ul> <li><a href="#">Sub Menu 4.1</a></li> <li><a href="#">Sub Menu 4.2</a></li> <li><a href="#">Sub Menu 4.3</a></li> </ul> </li> </ul></pre>   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: <pre class="lang:default decode:true">#menu li{ list-style: none; float: left; } #menu li ul{ position: absolute; visibility: hidden; margin: 0; padding: 0; } #menu li ul li{ float: none; }</pre>   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. <pre class="lang:default decode:true "><script src="jquery-1.11.1.min.js"></script></pre> <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: <pre class="lang:default decode:true"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></pre> For version 2.1.1: <pre class="lang:default decode:true"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></pre> 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: <pre class="lang:default decode:true "><script type="text/javascript"> $(document).ready(function(){ $('#menu > li').mouseover(function(){ $(this).find('ul').css('visibility','visible'); }); $('#menu > li').mouseout(function(){ $(this).find('ul').css('visibility','hidden'); }); }); </script></pre> 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.