How to Make a Drop Down Menu in Html
Learn to create a simple horizontaldrop down menu in html and css with three levels deep. Drop down menu will work in all modern browsers, including Internet Explorer 7. We will use the same html structure as WordPress, so you can use the css on your menu too.
Video Tutorial
What You'll Need
For this tutorial you will need to have 2 empty files prepared. One html file and one css file. To make the drop down menu functional you will mostly need css, so you can have a separate css file which is recommended to have it like that, or have it between the <head> using the <style> tags.
Writing the Main HTML Structure
Open "index.html" in any editor you have (Notepad++, Dreamweaver etc.) to start writing the html part. First, start with main structure of the document (doctype, document title, head tags etc). In this tututorial we will use XHTML 1.0 Transitional Doctype.
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Drop Down Menu in HTML and CSS with 3 Levels - Working in All Browsers</title> <link rel="stylesheet" href="styles.css" /> </head> <body> </body> </html>
HTML Code for Drop Down Menu
Now that you have the main html structure done, you can start writing the html code for your drop down menu, between the <body> tags . This will be created using unordered list <ul>.
Note that our drop down menu will have 3 levels deep, which is perfect for blogs or any other websites. There is an additional <div> to use it as background for your menu. All the code below was re-done and last updated in 17 June 2015.
<div class="menuBackground"> <ul class="dropDownMenu"> <li><a href="#">Home</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JS</a></li> </ul> </li> <li><a href="#">Programming</a> <ul> <li><a href="#">C++</a></li> <li><a href="#">WordPress</a> <ul> <li><a href="#">Hacks</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Shortcodes</a></li> </ul> </li> <li><a href="#">PHP</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">Resources</a> <ul> <li><a href="#">Icons</a></li> <li><a href="#">Fonts</a></li> <li><a href="#">Wallpapers</a></li> </ul> </li> <li><a href="#">Tips and Tricks</a></li> </ul> </div>
Until now your drop down menu should look very simple and without any style, like in the image below.
Understand How Drop Down Menu Works
Without any css styles, your drop down menu looks simple and horizontal. With the help of css, we will make it look vertical and with a decent design.
In the CSS structure you must refer to your elements by how deep they will go. For example, to refer on the third <ul> and deeper you can do it like this:
.dropDownMenu ul ul { list-style: none; } To refer strictly and only for the third <ul> you must use the children ">" selector. This means the rules will be applied only for the child elements that are inside that element. For example, if you want to select only the <li> elements inside the third <ul> you must do it like this:
.dropDownMenu > ul > li > ul > li { /* applying css only for list items inside the second ul */ } Note that the first <ul> is used under the class name dropDownMenu. Assuming that you are using WordPress, menu is generated automatically and you have access only on the first <ul> to set a class.
While is not recommended using a lot of descendant css selectors, as specified in this older article why, we don't really have a choice when styling a drop down menu in WordPress, but if you have full control over the code you can have classes for every <ul> tag in your code.
First of everything we need to set margins and paddings of all tags and elements to zero and set the <body> defaults (font size, font family etc). Check the code below:
* { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } Styling Your First Level Drop Down Menu with CSS
Great, now you are ready to write some styles for your drop down menu, so let's begin with the main <ul> together with his elements and menu background. In my example, main links will be on a single row. If you want to insert breaking space, you are free to do it as it will work without problems. I didn't set any height on elements.
/* Menu General Styles */ .menuBackground { background: brown; } .dropDownMenu a { color: #FFF; } .dropDownMenu, .dropDownMenu ul { list-style: none; margin: 0; padding: 0; } .dropDownMenu li { position: relative; } .dropDownMenu a { padding: 10px 20px; display: block; text-decoration: none; } .dropDownMenu a:hover { background: #000; } /* Level 1 Drop Down Menu */ .dropDownMenu > li { display: inline-block; vertical-align: top; margin-left: -4px; /* solve the 4 pixels spacing between list-items */ } .dropDownMenu > li:first-child { margin-left: 0; } .dropDownMenu > li > a {} .dropDownMenu > li > a:hover {} If you refresh your page, you will see a mess! Don't worry, this is normal because we didn't created the css for the other sub-menus.
Styling the Level 2 Drop Down Menu
To make things work, it is necessary to add the "position: absolute" property and "z-index: 999". Z-index is similar to layers from Photoshop. All elements are using by default z-index as 1. If you set a higher value for another element, it will be visible above the other element with lower value. The number can be as bigger as you need.
You will also notice a property top: 100%; . This means that sub-menus will appear under their parent elements (exactly as 100% of the parent element height). To see the difference you can try remove this line and add it again when you are done.
Below is the code for the level 2 sub-menu, which you can add a fixed width such as 200 pixels or you can let it without width (that means it will set the width on how bigger the list items are).
/* Level 2 */ .dropDownMenu > li > ul { text-align: left; width: auto; /* change auto value with 200px if you want a bigger menu */ display: none; background: #5DBB04; position: absolute; top: 100%; left: 0; z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */ } .dropDownMenu > li:hover > ul { display: block; } .dropDownMenu ul li a {} .dropDownMenu ul li a:hover {} Now everything should look good, except the Level 3 sub-menu. Refresh the page and you should have something like the image below:
Styling the Level 3 Drop Down Menu
Awesome! Until now everything looks perfect and your drop down menu looks fantastic and working fine. To align the level 3 drop down menu properly (on the right) we will use position: absolute and left: 100%;. Because the menu will appear on the right, thetop property will be now 0 and the left property should be the total width of the menu, which means 100%.
/* Level 3 */ .dropDownMenu > li > ul > li > ul { text-align: left; display: none; background: #E7B400; position: absolute; left: 100%; top: 0; z-index: 9999999; } .dropDownMenu > li > ul > li:hover > ul { display: block; } .dropDownMenu ul ul li {} .dropDownMenu ul ul li a {} .dropDownMenu ul ul li a:hover {} This third menu will have a orange color. Now refresh your page. You should now have a functional drop down menu with 3 levels deep.
Centering the Drop Down Menu
If you need to center the main <ul> with the same position as the other sections, you can wrap it inside a <div> that has max-width and auto left/right margins. I already did that in the tutorial, so take a look and analyze the code.
Also you can use text-align: center on the background div to center your menu exactly in the center. This is different then the method above.
Drop down menu was tested with the latest browsers such as Chrome, Opera, Safari, Firefox, Internet Explorer 7 and above. No bugs were detected.
Update: If you think this tutorial is helpful, please share further and link to this page. It was a struggle to make this drop down menu working in all browsers, including Internet Explorer. In the next tutorial we will show you how to make this drop down menu responsive, so stay updated via e-mail feeds.
Live Demo
Download Files
How to Make a Drop Down Menu in Html
Source: http://html-tuts.com/drop-down-menu-html-css-3-levels-deep/