CSS Menu Drop Down

A few articles ago I showed you how to make a basic website layout in my Styling HTML with Cascading Style Sheets Tutorial. Was it the most beautiful page? Not exactly, but it was easy to understand, which was the point in making it simple. Here it is if you missed it.

Click here to be taken to the web page to your left.

Feel free to do whatever you like with the code and if you have any problems editing it drop me a comment below.

So, we have a simple layout with a title bar, footer, side bar and main content div setup. This is the basic layout used for all WordPress themes. And, yes I am going to create a tutorial on designing custom WordPress themes very soon.

What is missing from this layout? A menu bar, right. Well, today I’m going to add a menu bar to this basic template. It will be as simple as possible, but provide you with the opportunity to style it however you would like. All of the code will be provided and yes you can use it however you would like. It is completely free!

Here is a picture of the new site with a menu bar and a little tidying up. Here is the location of this web page.

Before you try and work your way through this tutorial, you may want to watch / read, my HTML W3C Tutorial, Adding CSS Style to HTML Tutorial and The Javascript Scripting Tutorial. They are all free!

I’ll now list all of the drop down menu code. I’ll first go over all of the HTML code needed for the drop down menu, then the small amount of Javascript code and finally the CSS. This for the most part is a pure CSS drop down menu, so that is where you will find the bulk of the code.

Creating a CSS Menu Drop Down

All of the HTML Code for the Drop Down Menu

Here I’m creating a div that will contain all of the HTML code needed to create the menu. This specific code would create just one drop down item. If you want to add more just copy and paste the div with the id “dropdown1″, over and over again. My comments on the code will follow each block of code.

<div id=”menu”>
<table width=”1000″>
<tr>

<!– This dropdown menu is created by using a table named “navbar”. It has a default width of 1000 pixels –>

<td width=”160″ onmouseover=”expand(this);”
onmouseout=”collapse(this);”>

<!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal” in the file menu.css. We are defining the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>

<!– This is the menu item name that will appear at the top of the screen –>

<p>Menu 1</p>

<!– Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested inside of each of those div’s. When a onmouseover event is triggered the div’s attribute display is switched from none to inline, which allows a visitor to see the div on screen.–>

<div id=”dropdown1″ width=”155″>
<table width=”155″>
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<!– Each on of these blocks of code will create another drop down box. To make more, just copy and paste this code. You may have to change the width of the menu bar above? It is currently set at 1000 pixels. After you are done adding menu drop downs, end your html code with the following:

</tr>
</table>
</div>

And then of course all of the other content for your HTML page. That is all there is to creating the HTML part of this Drop Down Menu.

The Drop Down Menus Javascripts

There is very little Javascript code needed for the Drop Down Menu. The code needed is triggered by the onmouseover and onmouseout event handlers. They simply hide the menu divs when the mouse pointer is not directly on them and then make them appear, when it is. Here is the code:

function expand(s)
{
var td = s;
var d = td.getElementsByTagName(“div”).item(0);

td.className = “menuHover”;
d.className = “menuHover”;
}

function collapse(s)
{
var td = s;
var d = td.getElementsByTagName(“div”).item(0);

td.className = “menuNormal”;
d.className = “menuNormal”;
}

The above code should be saved in a file named menu.js. Like I said, the code changes the styling of the div to make it appear and disappear again and again.

CSS Menu Drop Down Code

This CSS code performs all of the styling for the Drop Down Menu. It changes the look and feel because that is what CSS is good at. I’ll list all of the code and then explain each CSS definition does.

BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;}

P
{padding-top: 10px;
margin: 0px;}

H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}

table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;}

table.menu
{font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;}

td.menuNormal
{padding: 0px;
color: white;
font-weight: bold;
vertical-align: top;
background-color: #0000FF;}

td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}

div.menuNormal
{display: none;
position: static;}

div.menuHover
{border: 2.5px solid white;
background-color: #0000FF;
display: inline;
position: absolute;}

a.menuitem:link
{text-decoration: none;
color: white;
padding: 2.5px;
background-color: #0000FF;
border-bottom: 2.5px solid white;
display: block;}

a.menuitem:visited
{text-decoration: none;
color: white;
padding: 2.5px;
background-color: #0000FF;
border-bottom: 2.5px solid white;
display: block;}

a.menuitem:hover
{text-decoration: none;
color: black;
padding: 2.5px;
background-color: lightblue;
border-bottom: 2.5px solid white;
display: block;}

a.menuitem:active
{text-decoration: none;
color: black;
padding: 2.5px;
background-color: lightblue;
border-bottom: 2.5px solid white;
display: block;}

Explanation of Each CSS Definition Above

• body – styles the whole body of the HTML web page
• p – provides all the styling on paragraph tags
• h1 – provides all the styling on the h1 header tags
• table.navbar – provides the styling for the main table that contains the drop down menu parts
• table.menu – provides styling for the submenu tables that drop down when an onmouseover event occurs
• td.menuNormal – Provides styling for the table cells, when the mouse isn’t hovering
• td.menuHover – Provides styling for the table cells, when the mouse is hovering
• div.menuNormal – Provides styling for the div that houses the drop down menu table, when the mouse isn’t hovering
• div.menuHover – Provides styling for the div that houses the drop down menu table, when the mouse is hovering
• a.menuitem:link – Provides styling to the individual cells, in the drop down menu, that contain your links
• a.menuitem:visited – Provides styling to the individual cells, in the drop down menu, after they have been clicked on or visited
• a.menuitem:hover – Provides styling to the individual cells, in the drop down menu, as the mouse cursor is hovering over them
• a.menuitem:active – Provides styling to the individual cells, in the drop down menu, as the mouse button is clicked on the menu item

That is basically all it takes to create a custom CSS Menu Drop Down. If you are having any problems with the code feel free to leave a comment below. I’ve included all of the files needed to create the web page here:

• menuexample.html
• menu.js
• menu.html
• menu.css

Till next time…

8 Responses to “CSS Menu Drop Down”

1. Saibot67 says:

   December 3, 2010 at 3:54 am

   cud sum1 pls email me the cod mayb in a complete html page at saibot67@gmail.com any help wud be appreciated. thanx in advance

   Reply
   • admin says:

     December 3, 2010 at 6:16 am

     Here are links to all of the code used. Just click the links and then view page source in your browser. Tell me if that doesn’t work for you

     menuexample.html

     menu.js

     menu.html

     menu.css

     Thanks
     Derek

     Reply
2. oscar says:

   February 22, 2011 at 2:01 am

   does this work for blogger???
   i seem to be having trouble.
   THANKS!

   Reply
   • admin says:

     February 22, 2011 at 6:00 am

     Not sure? I’ve not done much with blogger. I’ll look into it. Thanks

     Reply
3. Anonymous says:

   March 2, 2014 at 12:39 am

   Found your site while trying to learn css drop down menus. Just what I needed! Will be certain to give u credit. Other tutorials were a big help also! Thank u 4 posting!

   Reply
   • Derek Banas says:

     March 4, 2014 at 6:55 pm

     Thank you very much 🙂

     Reply
4. Adam says:

   March 2, 2014 at 1:00 am

   I am using your posted menu files to try to create another level of dropdown, i.e., Menu1–>Item1–>Item1a. I think I have the html part, but not too good with the js and css part. Do u have a tutorial that could explain that level of css dropdown? Any help would definitely be appreciated! Thank you!

   Reply
   • Derek Banas says:

     March 4, 2014 at 6:55 pm

     Here is a cross browser horizontal menu that is much better. i hope it helps 🙂

     Reply