Easy Cross Browser CSS Drop Down Navigation
Today I am going to show you how to create an easy css drop down menu that works across todays most popular browsers. If you like, you can view a demo of the completed work, or download the completed work using the buttons above.
Step 1) you can create a new file with your favorite code editor and name it "index.html" with no quotes. Then fill it in with the usual basic html elements as shown below:
<!DOCTYPE HTML> <html> <head> <title>Easy CSS drop down Navigation</title> </head> <body> </body> </html>
Step 2) Next we are going to add in the html code for the menu's structure and content. You can copy and paste the code below into the space between your opening and closing <body> tags for this example, or into the website you're working on.
<ul id="main-menu"> <li><a href="#">main-link 1</a> <ul> <li><a href="#">sub-link 1</a></li> <li><a href="#">sub-link 1</a></li> <li><a href="#">sub-link 1</a></li> </ul> </li> <li><a href="#">main-link 2</a> <ul> <li><a href="#">sub-link 2</a></li> <li><a href="#">sub-link 2</a></li> <li><a href="#">sub-link 2</a></li> </ul> </li> <li><a href="#">main-link 3</a> <ul> <li><a href="#">sub-link 3</a></li> <li><a href="#">sub-link 3</a></li> <li><a href="#">sub-link 3</a></li> </ul> </li> </ul>
Once you have pasted the above code, you may want to review the following points:
- To keep things easy, don't change the #main-menu id, as we will need it in the next step
- Notice the second level(sub menu) ul elements are nested within the main level li elements
- As long as the #main-menu id is in place, and the html structure of each main menu item is the same, you can make as many menu items, and sub menus as you like
- If you view the index.html file in a web browser right now, it will resemble something terrible, something... plain... boring... and hard to look at!
Step 3) You're almost there! For the final step we are going add some css code to make it all work, and make it nice to look at too! The following code can be copied and pasted into your index.html file just BEFORE your closing head tag that looks like this: </head>.
<style type="text/css">
#main-menu, #main-menu > li > ul {
list-style: none;
font-weight: bold;
}
#main-menu > li {
float: left;
}
#main-menu li > a {
display: block;
background: #444;
color: #4bf;
padding: 5px 10px;
text-decoration: none;
}
#main-menu li:hover > a {
background: #4bf;
color: #fff;
}
#main-menu >li > ul {
position: absolute;
display: none;
padding: 0;
z-index: 10;
}
#main-menu > li:hover > ul {
display: block;
z-index: 100;
}
</style>
So, to review the css code, first we cleared all list-item bullets, and made our default font boldface. Next we floated the main level li elements left, so they all sit beside eachother. The third block basically styles what our main level menu items will look like; feel free to play around with the colors if you don't like the ones I chose. The fourth css block is again styling the menu items, only this time it is telling them what to look like when we hover over them. The 5th code block hides the sub menu ul elements, and helps them display properly with 0 padding applied. The 6th, and final, css block tells the sub menu ul elements to show themselves, when a user hovers their mouse over a main menu li element. Notice how the main level menu items stay styled when your mouse pointer is hovering on the sub menu items: enjoy!
Just in case you run into problems when you tested your finished menu, below is how your index.html file should look after it is completed:
<!DOCTYPE HTML>
<html>
<head>
<title>Easy CSS drop down Navigation</title>
<style type="text/css">
#main-menu, #main-menu > li > ul {
list-style: none;
font-weight: bold;
}
#main-menu > li {
float: left;
}
#main-menu > li > a {
display: block;
background: #444;
color: #4bf;
padding: 4px 10px 5px;
text-decoration: none;
}
#main-menu li:hover > a {
background: #4bf;
color: #fff;
}
#main-menu >li > ul {
position: absolute
display: none;
padding: 0;
z-index: 10;
}
#main-menu > li:hover > ul {
display: block;
z-index: 100;
}
ul > li > ul > li > a {
display: block;
background: #444;
color: #4bf;
padding: 4px 10px 5px;
text-decoration: none;
}
</style>
</head>
<body>
<ul id="main-menu">
<li><a href="#">main-link 1</a>
<ul>
<li><a href="#">sub-link 1</a></li>
<li><a href="#">sub-link 1</a></li>
<li><a href="#">sub-link 1</a></li>
</ul>
</li>
<li><a href="#">main-link 2</a>
<ul>
<li><a href="#">sub-link 2</a></li>
<li><a href="#">sub-link 2</a></li>
<li><a href="#">sub-link 2</a></li>
</ul>
</li>
<li><a href="#">main-link 3</a>
<ul>
<li><a href="#">sub-link 3</a></li>
<li><a href="#">sub-link 3</a></li>
<li><a href="#">sub-link 3</a></li>
</ul>
</li>
</ul>
</body>
</html>
Heya, I just hopped over to your webpage using StumbleUpon. It’s a bit small compared to what I usually browse, but I really liked your idea here none the less. Thank you for creating some thing worth browsing!