jQuery Drop Down List

The best way how to get a good jQuery drop down list is to utilize some of the plugins available at

http://www.jqueryscript.net/tags.php?/Drop%20Down%20Menu/

There are many tutorials around the internet how to add drop down list on your website and use it in your applications.

Example:

Most of them use the most low-level way how to do that, and you have to create lot of boilerplate code to get a good drop down in your menu accomplished with jQuery.

Most of these plugins utilizing jQuery have same structure:

1. You need to include a jQuery script into the HTML header

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

2. You need to include drop down plugin script to HTML header

<script src="/jquery.{plugin_name}.js"></script>

3. Include CSS which adds styling to menu

<link rel="stylesheet" href="/css/{plugin_name}.css">

4. The actual HTML of drop down lists

<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<li><a href="#">Item 4</a>
</ul>