Hey Everyone and welcome back to Tutoid. In this tutorial i will show you how to make a very simple horizontal dropdown menu for website. It is very easy and i hope you will like it.

So first goes the basic structure of menu. I will using simple div elements instead of ul and li.

<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>
<div id="menu-item">
<div id="menu-head">Downloads</div>
</div>
<div id="menu-item">
<div id="menu-head">Contact Us</div>
</div>
</div>
</body>

menu-item is the single element of menu which contains menu-head as the name. For sub-menu we have

<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>

So finally we have our full menu structure with the sub-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">Contact Us</div></div>
</div>

</body>

Now we can move on to CSS. property ‘display’ allow us to hide and show the element from page.

When display is set to none, that element does not take space in the page.

So when we hover menu element we change the display property to ‘block‘. So here is our CSS.


* { box-sizing: border-box; font-family: monospace;}
body {background: #e3dfd7;}
#menu {
position: absolute;
left:0px;
top: 0px;
width: 100%;
float:left;
background: #222222;
}
#menu-item {
float: left;

}
#menu-head {
padding: 20px 30px 20px 30px;
color:white;
font-size: 24px;

}
#sub-item {
width: 100%;
padding: 20px 30px 20px 30px;
background: white;
color: #222222;
font-size: 24px;
border-bottom: 1px solid grey;
}
#sub-menu {
width: 250px;
position: absolute;
display: none;

}
#menu-item:hover #menu-head {
background: white;
color: #222222;

}
#menu-item:hover #sub-menu {
display: block;

}

So now you are ready with your own CSS Dropdown Menus for website.

Screenshots:

CSS Dropdown Menu 1

Download Sample Project.

Advertisements