A drop-down menu is a graphic control element that allows the user to choose a single value from a list. The drop-down list appears at a single level until a user clicks on a value, initiating a drop-down list.
CSS DropDowns are menus that have top-level headings that drop down with more options when clicked on. These menus allow you to navigate through the website and find everything that is available on the site including all sub-categories. When designed well, you can make your website a well-organized place for your users.
CSS DropDowns utilize both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). There are ways to build custom DropDown menus using JavaScript in addition to the HTML and CSS, but this tutorial does not include any JavaScript as this tutorial is about keeping strictly to CSS and HTML.
As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content, while CSS is used to enhance your web page with creative design aspects.
This tutorial will walk you through a lesson on creating custom CSS multiple drop down menus. Additionally, you will encounter some creative design elements. All you need to start with is a simple code editor such as Notepad ++.
The Essentials of a CSS DropDown Menu
Build the HTML Nested Menu
First, you will need to build nested topics. See the following code sample below. You can fill in any topics you like.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DropDown List for Film Production</title>
<style>
</style>
</head>
<body>
<article>
<h1>Film Production</h1> <! –– this is our page title ––>
<nav id="main_nav">
<ul>
<li>
<a href="">Director</a> <! –– topic 1 ––>
<ul>
<li><a href="">DP</a></li>
<li><a href="">Director</a></li>
<li><a href="">Assistant Director</a></li>
</ul>
</li>
<li>
<a href="">Art Dept.</a> <! –– topic 2 ––>
<ul>
<li><a href="">Grip</a></li>
<li><a href="">Lighting</a></li>
<li><a href="">Sound</a></li>
</ul>
</li>
<li>
<a href="">Water Dept.</a> <! –– topic 3 ––>
<ul>
<li><a href="">Cinematographer</a></li>
<li><a href="">Stunt Surfer</a></li>
<li><a href="">Boat Captain</a></li>
</ul>
</li>
<li>
<a href="">Actors</a> <! –– topic 4 ––>
<ul>
<li><a href="">Joe Bob</a></li>
<li><a href="">Sue Zookowski</a></li>
<li><a href="">Rob Tandem</a></li>
</ul>
</li>
</ul>
</nav>
</article>
</body>
</html>
This is what a nested topic initially looks like in a browser with just the HTML.
Adding the Essential CSS
Let’s add some body background to start things off with.
body {
background: #333;
margin: 15px;
}
This will add a nice background to begin working with. This may not look pretty yet, but you will get there.
Let’s now tend to the heading by adding the following CSS to define the h1 heading tag.
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
Now, you can see the result in the font aspects.
Notice the placement of the article tag surrounding the entire nested layers. This allows you to define the background of this specific section of the page. Review this carefully — there are quite a few creative definitions here.
article {
width: 600px;
margin: 0 auto;
background: #0458d6;
color: #fff;
border-radius: 3px;
box-shadow: 0 0 10px 2px #666;
}
The result is this:
Now what is missing? The menu needs to hide the sub-topic layer. To do this let’s add the following code:
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
The page now looks as follows:
What happens when you add a CSS section for the navigation area as a block?
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
Now the area is transformed to look like this.
For a moment the links seem to have disappeared, but in reality, what happened is simply the removal of the underline. This is not necessary to display anymore.
These topics need to appear in their own block that is showcased with a white background. Let’s add the following code to make this happen:
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
The result is a link area that has now become more distinct from its surrounding box.
Let’s make the font uppercase by adding the following code:
#main_nav > ul > li > h1 {
text-transform: uppercase;
}
The result is as follows:
To get the topics to align into a bar, let’s see what happens when you add the following code:
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
With this code added, the topics now align into a row.
Let’s fix the alignment by removing margins and padding. This should allow all four topics to remain at the top.
* {
margin: 0;
padding: 0;
}
Now you are going to add the following to help manage what happens when hovering over the topics. This should put the finishing touches on your CSS multiple drop down menu. Notice that when you see a single li — this refers to the first level or top level topic. When you see li li, you are looking at the menu that drops down into what is called the second level. You could design this with even a third level using li li li to create a multilevel dropdown on hover CSS menu.
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
And add to further align the navigation.
#main_nav ul ul ul {
left: 100%;
top: 0;
}The result is a beautiful multilevel dropdown on hover CSS layout.
Final Note
As you can see, these CSS DropDown Menus involve quite a bit of care to establish a functional menu and to create a menu that looks pleasing to the eye. What you also see is that JavaScript is not necessary to create something really magical for your customers.
However, there are many areas in the CSS code that you can play with to get the alignment you want, as well as to get the functionality you are looking for.
It is not easy, but you can certainly accomplish this and learn to customize the settings with patience and care.
Where to Next?
This CSS DropDowns introduction should provide a good starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
