Uptown HTML
CSS dropdown menu
A CSS drop-down is basically a group of list items with in a section of another group of list items. These groups of list items are displayed when the courser (mouse) is hovered over top of the main list item that has a nested group of list items with in it.
CSS drop-downs are extremely useful wen it comes to sites with multiple sub sections, or a site that may have a large amount of navigation tabs through out there site.
Objective
Users will learn how to successfully create a drop-down navigation menu strictly using html and CSS properties.
Sub Objective
In this lesson you will learn the styling and HTML structure of a CSS drop-down using ul, li, and href tags along with CSS properties.
View Demo
The framework
When it comes to drop-down menus, they strongly rely on HTML structure and just the right amount of CSS. Below you will see the correct structure to get you started and on you're way to creating your CSS drop-down menu.
<ul id="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li>
<a href="#">Mission</a>
<ul>
<li><a href="#">Mission one</a></li>
<li><a href="#">Mission two</a></li>
<li><a href="#">Mission three</a></li>
<li><a href="#">Mission four</a></li>
</ul>
</li>
<li>
<a href="#">Items</a>
<ul>
<li><a href="#">Items product (one)</a></li>
<li><a href="#">Items product (two)</a></li>
<li><a href="#">Items product (three)</a></li>
<li><a href="#">Items product (four)</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Out-of-hours</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
As you see above in the framework all of the <ul>’s are nested inside other <ul>’s. As you can also see there are no <div>’s, ID’s or classes needed to complete this task just regular old code semantics.
To get the dropdown affect we have used the #nav <ul>’s containing the <li>’s and joining them with other <ul>’s and <li>’s nested inside of them.
The Styling (CSS)
Now Its time to make all the work we have done look pretty. We are now going to add some CSS styling to our series of nasted <ul>'s to give it that full dropdown affect.
/*css dropdown styling example*/
#example_nav{
list-style: none;
font-weight: bold;
margin-bottom: 10px;
position: relative;
margin-top: 20px;
float: left;
}
#example_nav li{
float:left;
margin-right:10px;
position:relative;
}
#example_nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
border-radius: 10px;
}
#example_nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
#example_nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#example_nav ul li{
padding-top:1px;
float:none;
}
#example_nav ul a{
white-space:nowrap;
}
#example_nav li:hover ul{
left:0;
}
#example_nav li:hover a{
background:#1a6884;
text-decoration:underline;
}
#example_nav li:hover ul a{
text-decoration:none;
}
#example_nav li:hover ul li a:hover{
background:#333;
}
/*css dropdown styling example*/
The Finished Peace
Now that you understand how to make a dropdown menue using html and CSS, try and test your self on what you have learned by taking the quiz located on the right side of the screen. GOOD LUCK!!!
