Hello Everyone welcome back to Tutoid. Today i will  show you how to make a CSS Vertical Dropdown menu using CSS. In the previous tutorial i showed you how to make a horizontal menu bar, so it is very easy to make it vertical. So let’s see how.

So here is the same menu structure used in horizontal menu.

<body>
<div id="menu">
<div id="menu-item">
<div id="menu-head">Home</div>
</div>
<div id="menu-item">
<div id="menu-head">About</div>
<div id="sub-menu">
<div id="sub-item">Item 1</div>
<div id="sub-item">Item 2</div>
<div id="sub-item">Item 3</div>
</div>
</div>
<div id="menu-item">
<div id="menu-head">Downloads</div>
<div id="sub-menu">
<div id="sub-item">Item 1</div>
<div id="sub-item">Item 2</div>
<div id="sub-item">Item 3</div>
</div>
</div>
<div id="menu-item">
<div id="menu-head">Feedback</div>
</div>
</div>
</body>

So in the vertical menu. We set height to 100% instead of width to 100%. We also use

clear:both;

to clear both the left and right margin to bring it to the new line, we position the ‘sub-menu’ to 250px which is equal to the width of the menu bar.

So here is what CSS looks like with some minor changes.

* {box-sizing: border-box; font-family: consolas;}
body {
background: #e3dfd7;
}
#menu {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
background: #222222;
float: left;
width: 250px;
}
#menu-item {
float: left;
clear: both;
width: 250px;
}
#menu-head {
padding: 20px 30px;
font-size: 24px;
color: white;
background: #222222;
width: 250px;
float: left;
}
#sub-menu {
position: absolute;
width: 250px;
display: none;
left: 250px;
float: left;
}
#sub-item {
width:100%;
padding: 20px 30px;
font-size: 24px;
color: #222222;
background: white;
}
#menu-item:hover #menu-head {
background: white;
color: #222222;
}
#menu-item:hover #sub-menu {
display: block;
}

So now you are finally ready with the vertical dropdown menu.

 

Advertisements