Drop-down Menu Using CSS and JavaScript


In this course, i’m going to teach you how to create a Drop-down menu using Javascript and CSS. This is very useful when you create a web application that uses a Drop-down list for a sub menu. The sub menu or drop-down list will show when the user the mouse cursor over the main menu. The output of this course is look like as shown below.


Now follow the given steps:

  1. Create a folder named as “Dropdown
  2. then, inside this folder we need to create another folder name as “images”
  3. then we’re also going to create a “home.html” file
  4. and a “design.css” file
  5. and lastly a “drop.js” file.

Next, open the home.html file and add the following code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>


<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>JavaScript Dropdown</title>

<link rel=”stylesheet” href=”design.css” type=”text/css” />

<script type=”text/javascript” src=”drop.js”></script>



<h3>JavaScript Dropdown sample</h3>

<br /><br />


<dl class=”dropdown”>

<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”>Programming Languages</dt>

<dd id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”>


<li><a href=”#” class=”separator”>Visual Basic</a></li>

<li><a href=”#” class=”separator”>Visual Basic.Net</a></li>

<li><a href=”#” class=”separator”>ASP/ASP.Net</a></li>

<li><a href=”#” class=”separator”>C#</a></li>

<li><a href=”#” class=”separator”>C/C++</a></li>

<li><a href=”#” class=”separator”>Delphi</a></li>

<li><a href=”#” class=”separator”>Java</a></li>

<li><a href=”#”>JavaSript</a></li>





<dl class=”dropdown”>

<dt id=”two-ddheader” onmouseover=”ddMenu(‘two’,1)” onmouseout=”ddMenu(‘two’,-1)”>Mobile</dt>

<dd id=”two-ddcontent” onmouseover=”cancelHide(‘two’)” onmouseout=”ddMenu(‘two’,-1)”>


<li><a href=”#” class=”separator”>Android</a></li>

<li><a href=”#” class=”separator”>iOS</a></li>

<li><a href=”#” class=”separator”>windows phone</a></li>




<dl class=”dropdown”>

<dt id=”three-ddheader” onmouseover=”ddMenu(‘three’,1)” onmouseout=”ddMenu(‘three’,-1)”>Databases</dt>

<dd id=”three-ddcontent” onmouseover=”cancelHide(‘three’)” onmouseout=”ddMenu(‘three’,-1)”>


<li><a href=”#” class=”separator”>Microsoft Access</a></li>

<li><a href=”#” class=”separator”>MySQL</a></li>

<li><a href=”#” class=”separator”>MSSQL</a></li>

<li><a href=”#” class=”separator”>MySQLi</a></li>

<li><a href=”#” class=”separator”>Oracle</a></li>

<li><a href=”#”>SQL Server</a></li>






<div style=”clear:both” />




then, for “design.css” add the following code:


body {margin:25px; font:12px Verdana, Arial, Helvetica}

* {padding:0; margin:0}

.dropdown {float:left; padding-right:5px}

.dropdown dt {width:188px; border:1px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}

.dropdown dt:hover {background:url(images/header_over.gif)}

.dropdown dd {position:absolute; overflow:hidden; width:200px; display:none; background:#fff; z-index:200; opacity:0}

.dropdown ul {width:204px; border:1px solid #9ac1c9; list-style:none; border-top:none}

.dropdown li {display:inline}

.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}

.dropdown a:hover {background:#d9e1e4; color:#000}

.dropdown .separator {border-bottom:1px solid #b9d6dc}



And for “drop.js” add the following code:


var DDSPEED = 10;

var DDTIMER = 15;


// main function to handle the mouse events //

function ddMenu(id,d){

var h = document.getElementById(id + ‘-ddheader’);

var c = document.getElementById(id + ‘-ddcontent’);


if(d == 1){


if(c.maxh && c.maxh <= c.offsetHeight){return}

else if(!c.maxh){

c.style.display = ‘block’;

c.style.height = ‘auto’;

c.maxh = c.offsetHeight;

c.style.height = ‘0px’;


c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);


h.timer = setTimeout(function(){ddCollapse(c)},50);




// collapse the menu //

function ddCollapse(c){

c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);



// cancel the collapse if a user rolls over the dropdown //

function cancelHide(id){

var h = document.getElementById(id + ‘-ddheader’);

var c = document.getElementById(id + ‘-ddcontent’);



if(c.offsetHeight < c.maxh){

c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);




// incrementally expand/contract the dropdown and change the opacity //

function ddSlide(c,d){

var currh = c.offsetHeight;

var dist;

if(d == 1){

dist = (Math.round((c.maxh – currh) / DDSPEED));


dist = (Math.round(currh / DDSPEED));


if(dist <= 1 && d == 1){

dist = 1;


c.style.height = currh + (dist * d) + ‘px’;

c.style.opacity = currh / c.maxh;

c.style.filter = ‘alpha(opacity=’ + (currh * 100 / c.maxh) + ‘)’;

if((currh < 2 && d != 1) || (currh > (c.maxh – 2) && d == 1)){





Code Explanation:

  1. In the “home.html” file as you observe on we add link on the Head section of our html file. These are the “design.css” and “drop.js”. Having these two file we can be able to do the dropping down menu onMouseover, and the other, onClick.
  2. For “design.css“, we simply use CSS to convert a series of nested Unordered List in to a smooth, easy to use, neat and self-contained dropdown menu. Meaning this is where the magic happens.
  3. Then for the “drop.js” is a script that offers enhanced stability and speed. It includes animation, toggles, rollout timeout, and style handling.



You can download the Source Code here.dropdown

Please comment and share this to your friends.

Looking for more source code? Type your keyword here here!


  1. This site is completely gret. I’ve ask these informations a whole lot
    and I realised that is professional, fast to comprehend.
    I congratulate you for this article that I’ll tell to people around.
    I request you to visit the gpa-calculator.co page where
    each learner or learner can calculate ratings
    grade point average levels. Be great!


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.