Get in Touch (Coming Soon)

CSS-Only Dropdown

Only CSS


Project Description

I designed this toward the end of summer 2012 after scouring the internet for a dropdown menu that would fulfill the following goals:
 - It had to activate on click as opposed to on hover
 - It couldn't disappear when the user hovered their mouse outside the dropdown
 - It had to be made using only HTML and CSS. No JavaScript allowed.

I only found one other person who got close to what I was looking for. His name is Stu Nicholls, and this is his solution. As you can see, it comes close but doesn't quite cut it, because as soon as you hover off of his menu (you have to go at least two layers deep) it collapses. At least he had one, because everyone else either said it couldn't be done or something along the lines of "Just use JavaScript."

So I believe this is the first dropdown menu on the web that meets all three criteria and becomes a viable replacement for a traditional JavaScript dropdown. It is free for all kinds of use, but because of the time and effort I put into creating it I would appreciate credit and a link to my site in your CSS.


Known Bugs

 - No edge detection; if the screen is not wide enough to display the entirety of the dropdown, it doesn't care.
 - Yes, you can mouse anywhere... except within the menu two layers above the most recently opened dropdown.

If you think you have a fix for any of the above, please let me know!

Like what you see?

I'm available both for hire and contract work.

TwitterGoogle PlusLinkedInForrstDribbble

© 2013 Teagan Atwater. All rights reserved.