In this tutorial we will learn how to make a nice and clean vertical menu with subcategories using HTML and CSS.
View Demo
Step 1
We need 2 files for this tutorial:
- index.html
- style.css
Note: You can simply create those files by creating a new text file and change .txt extension to .html or .css
Open index.html with your favorite editor. I use Notepad++ (free and easy to use).
First we need to write the html validation code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>How to make a Drop Down CSS Menu</title> <link type="text/css" rel="stylesheet" href="style.css"/> </head> <body> <!-- Menu Code Below --> </body> </html>
Step 2 – HTML Menu
Now we must html our menu and after css it. Put this code under the <body> tag.
<div align="left"> <div class="menu"> <ul> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Subcategory 1</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Subcategory 2</a></li> <li><a href="#">Subcategory 2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Subcategory 3</a></li> <li><a href="#">Subcategory 3</a></li> <li><a href="#">Subcategory 3</a></li> </ul> </li> </ul> </div> </div>
Step 3 – CSS Menu
Open style.css and copy the following code:
.menu {width: 200px;}
.menu ul {list-style-type: none;}
.menu li a {float: left; width: 200px; text-align: left; font: 10pt Arial; padding: 5px 5px 5px 10px; text-decoration: none; color: #444; background: #eee; border: 1px solid #e4e4e4; margin: 1px;
}
.menu a:hover {color: #222; background: #e5e5e5; border: 1px solid #ccc;}
.menu li ul a {margin-left: -9px; width: 170px; background: #f4f4f4; border: 1px solid #eee;}
.menu li ul a:hover {background: #f1f1f1; border: 1px solid #e5e5e5;}
View Demo
Download Files
(4 votes, average: 4.50 out of 5)
This is great, Thanks for sharing this tutorial. I’m Gonna try this out for myself. Good Job and more power!
-richard
this is the first time I use tags.
I copied s suggested the index and style sheet.
The index works fine but for any reason the style is not recognized
Any idea what wen wrong?
Multumesc pentru pasi + explicatii… o sa adaptez la o idee care o aveam deja. :)
Merci