Drop-Down Navigation Bar Using :hover Pseudo Class, and Unordered Lists

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following notable HTML5/CSS3 topics will be covered in this tutorial:

1. “:hover” pseudo-class
2. “white-space” CSS3 property
3. “position: absolute” CSS3 property
4. “display” CSS3 property


This is probably one of the more frustrating features to code for your own site when you’re a beginner. A drop down navigation bar could be one of the most essential features on your website believe it or not. If you have a lot of content and links, and need help on coding a navigation bar that handles drop-down menus, then this solution is for you. There could be better solutions out there, using different HTML elements, but this is the solution that I was able to come up with.

I’ll post the screenshots of the original navigation bar, and the navigation bar after it was hovered over, to show that the dropdown menu actually works. I know there’s a better way to do this, such as having you test the navigation bar yourself on my blog, but unfortunately I can’t handle that feature. Sorry for any inconveniences, but the code does work!

Original Navigation Bar:
initial_navigation_bar

Navigation Bar Displaying Drop Down Menu, After Hovering Over “Profile” Tab:

dropdown_menu

Questions? Feedback? Please leave a comment!

HTML Code:

[sourcecode language=”html” collapse=”false” wraplines=”false”]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dropdown Menu Demo</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div id="navigation"> <!– Navigation id not used as selector in CSS file. –>
<ul>
<li><a href="#">Home</a>
<ul class="dropdown">
<li><a href="#">Games</a></li>
<li><a href="#">Anime</a></li>
</ul>
</li> <!– END: Home –>

<li><a href="#">Profile</a>
<ul class="dropdown">
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li> <!– END: Profile –>

<li><a href="#">About</a>
<ul class="dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Executive Team</a></li>
</ul>
</li> <!– END: About –>

<li><a href="#">Support</a>
<ul class="dropdown">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</li> <!– END: Support –>

</ul>
</div>
</body>
</html>
[/sourcecode]

CSS Code:

[sourcecode language=”css” collapse=”false” wraplines=”false”]
ul {
list-style:none;
margin:0; /* Demonstration purposes to keep navigation menu in top left corner. */
padding:0;
}

ul li {
float:left; /* Puts tabs on same line */
}

ul li a {
display:block; /* Displays links on separate lines. */
color:#000000;
padding:5px 15px 5px 15px; /* 5px top, 15px right, 5px bottom, 15px left */
margin-top:1px; /* Separates dropdown links by whitespace */
margin-left:1px; /* Separates tabs by whitespace */
background-color:#CCCCCC;
white-space:nowrap; /* Doesn’t wrap words across separate lines if line is too long for parent’s li width. This is for the dropdown menu. */
}

li:hover ul { /* Displays dropdown menu for specific li element, once mouse hovers over li element */
position:absolute; /* Positions directly under the correct tab */
display:block;
}

li:hover li { /* Keeps li elements same width in dropdown menu, since it’s originally floating left, as specified in "ul li" selector */
float:none;
}

li:hover a {
background-color:#252525; /* Changes background color of tab and dropdown links to shade of black when tab is hovered over */
color:#FFFFFF; /* Changes text color of tab and dropdown links to white when tab is hovered over. */
}

a {
text-decoration:none; /* So that links aren’t underlined */
}

.dropdown {
display:none; /* Anything in dropdown class doesn’t appear initially when page loads */
}

.dropdown li:hover a {
text-decoration:underline; /* Underlines link if li element in dropdown menu is hovered over */
}

.dropdown li a:hover {
background-color:#CCCCCC; /* Changes background color of link in dropdown menu to grey when we hover over link */
color:#000000; /* Changes text color of link in dropdown menu to black when we hover over link */
}
[/sourcecode]

Leave a Reply

Your email address will not be published. Required fields are marked *