PSDtoHTML logo

How to create a dropdown menu in CSS

The major part of the websites which can be found on the Internet dispose of a menu. When having a menu containing various elements, web designers often develop a dropdown menu which is displayed as soon as a visitor hovers his/her mouse over the menu. The use of a dropdown menu will add to the clarity and user-friendliness of your website. To create a dropdown menu, developers prefer an HTML-CSS combination. The HTML is used to create the unordered list after which the unordered list is called up in the CSS. The CSS is also used to style the unordered list and to make it fully-functional. Find below the required HTML and CSS information to create your own CSS dropdown menu:

HTML:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">Freelancer</a></li>
<li><a href="#">Office</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Facts</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
CSS:

*{
margin: 0;
padding: 0;
}
ul ul {
display:none;
position:absolute;
top:100%;
padding:0;
}

ul li:hover > ul {
display:block;
background:#fefdd9;
border:1px solid #cdc602;
}

ul {
list-style:none;
position:relative;
display:inline-table;
padding:0;
}

ul:after {
content:"";
clear:both;
display:block;
}

ul li {
float:left;
background:#fefdd9;
border:1px solid #cdc602;
}

ul li a {
display:block;
color:#000;
text-decoration:none;
padding:5px;
}

ul ul li {
float:none;
position:relative;
}

ul ul li a {
color:#000;
padding:5px;
}

ul ul ul {
position:absolute;
left:100%;
top:0;
}

a:hover{
text-decoration: underline;
}
DEMO

Was this useful?

Categories