Stpe 1: Open any HTML editor, write the script in ul-li order without any CSS and save the file with .html extension
<head>
<title>Vertical Menu Bar using HTML n CSS</title>
</head>
<body>
<div id=”divMenu”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link2</a>
<ul><li><a href=”#”>Link 2.1</a></li>
<li><a href=”#”>Link 2.2</a></li>
</ul>
</li>
<li><a href=”#”>Link3</a>
<ul><li><a href=”#”>Link 3.1</a></li>
<li><a href=”#”>Link 3.2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Now open this html page in any browser, it should look like below, without any formatting. Next we will add CSS script to organize drop down menus vertically.
- Link 1
- Link2
- Link 2.1
- Link 2.2
- Link3
- Link 3.1
- Link 3.2
Step 2: Write internal CSS using <style> tag under HEAD section of html. If you don’t know about internal and external css, read our article on horizontal menu bar. First add few basic css tags to set color, width, margin, padding, mainly how menu will be displayed in the web page.
<style>
/*divMenu */
#divMenu, ul, li, li li {
margin: 0;
padding: 0; }
#divMenu {
background-color:#FF9933;
height:585px;
width:170px;
float:left; }
#divMenu ul {
line-height: 25px; }
#divMenu li {
list-style: none;
position: relative;
background:#ebb659; }
#divMenu li li {
list-style: none;
position: relative;
color:#33FF66;
left: 170px;
top: -27px; }
#divMenu ul li{
width: 170px;
height: 25px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,’Times New Roman’,serif;
font-size:12px;
color:#000000;
border:1px solid #eee;
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); }
</style>
box-shadow: We have used this tag to give some special effects when cursor points on menu options.
After adding CSS:
Step 3: Add another CSS block to hide all ‘ul’ items which come under main ‘ul’ item. To do this, set css property visibility as hidden for ul-ul items. As we want to display second label ul items once we hover on first label ul items, we have to use ul twice like below.
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
Step 4: Add one more CSS block to display all ‘ul’ items under ‘li’ items when we keep the cursor on ‘li’. To do this, use css property visibility as visible for the tag ul under li when we do hover.
#divMenu ul li:hover ul {
visibility: visible;
}
After adding CSS:
Step 5: In our final few blocks, we will add few more lines to get better look and feel css menu bar. We want font size will be bold when we do hover on li or ul items, background color will be changed.
#divMenu li:hover {
background-color:#CCCCFF;
}
#divMenu ul li:hover ul li a:hover {
background-color:#CCCCFF;
}
#divMenu a:hover {
font-weight: bold;
}
After adding CSS:
That’s it!! If you have any doubt or question, feel free to ask us. To get more updates on recent activities, follow ‘TechOneStop’ on Facebook/Twitter/LinkedIn or join our website as followers.
<< How to create horizontal dropdown menu bar
Thanks love it.. 🙂