How to make a clean Vertical CSS Menu
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
Written by Extreme Design Studio 
Providing useful resources for web development, tutorials and many more! You can follow us on Twitter or like us on Facebook. Want to post similar articles here? Visit the Write for Us Page for more details.
Rate & Share
Tags & Keywords
Related Posts
Comments
Multumesc pentru pasi + explicatii… o sa adaptez la o idee care o aveam deja. :)
Merci
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?
This is great, Thanks for sharing this tutorial. I’m Gonna try this out for myself. Good Job and more power!
-richard