css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.


  1. This has a nice design to it. It just misses some accessibility. You could start with using proper markup for your navigation and links. As you might know, li's cannot be accessed by keyboard because they are not included in the taborder. In its current state, you cannot see where you are on the page if your use a keyboard. Anchors don't have this problem. Heydon Pickering wrote about accessible dropdown on his website.

  2. nice design. But what happens on touch. Since all the interactions are based on hover, you will get some crazy touch-interactions on some devices like smartphones and tablets.

  3. These kind of menus typically benefit from a bit of JS to accommodate for touch events. The pure CSS approach is admirable (and one that I utilize a lot myself) but only when it doesn't directly interfere with the UX. If you're going to use the username Responsive Designs, I would make sure that the stuff you're building is mobile first :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.