Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
With the help of some advanced selectors, a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step-by-step process of building your own pure CSS dropdown menu.
The menu we will be creating features two subcategories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath the main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action.
View the pure CSS dropdown menu demo
The HTML Structure
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Inspiration</a></li> </ul> </nav>
First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav>
The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav>
The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design” <li>.
So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.
The CSS Styling
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors, we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First, hide the sub-menus by targeting any UL’s within a UL with the display:none; declaration. In order to make these menus reappear, they need to be converted back to block elements on the hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows, and border-radius. Adding position:relative; will allow us to absolutely position the sub-menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clear fix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub-menus and prevent them from appearing.
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser, this will make the link change to a blue gradient background and white text.
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
The LI’s of each UL in the sub-menu doesn’t need floating side by side, instead, they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.
The Completed Pure CSS Dropdown Menu
Comments are closed.