I’ve been working with Cam on a new website, and he charged me with the task of making the drop down menus.
In the past, my drop downs have all been Javascript, but now that I’m more comfortable with CSS, I like the idea of a JS-free drop down menu. Not only is it way more accessible, it ensures that if your JS breaks, your page doesn’t break with it. Aesthetics aside, it also makes sure people can still get to your content.
CSS drop down menus take advantage of the :hover pseudo-class. Bonus: even Internet Explorer likes it!
The basic setup is this:
ul.parents {
list-style: none;
padding: 0px;
margin: 0px;
}
ul.parents li {
float: left;
display: inline-block;
}
Now you have a nice row of list items. Then:
ul.parents li > ul {
position: absolute;
display: none;
line-height: 100%;
list-style: none;
padding: 0px;
margin: 0px;
}
ul.parents li:hover > ul {
display: block;
clear: both;
}
Now you have a list (your sub-menu items) that are hidden, but when you hover over the parent <li> element, the child list’s display: none; property is replaced with display: block. Brilliant!
I suppose it’s not rocket science, but it does feel like building your own house, or making mac-and-cheese from scratch. CSS wut wut!