Here are some CSS / CSS3 dropdown menus that were coded by using pure CSS3. I hope that you will like this collection and find it useful for you.

Whirling CSS3 dropdown menu

Various dropdown menus can be easily created with CSS3 with the help of selectors. Just connect your imagination – and you will create a truly new and unique design. In today’s lesson, we will create a new CSS3 drop-down menu with new effect: when you hover on the upper menu items, the submenu items appear whirling. Just follow this tutorial to see the step by step process of building this menu.

A pure CSS onclick menu

We’ve all seen the pure CSS dropdown menus that open on mouseover using the :hover pseudo-class. However useful these menus can be, they can make your page feel jumpy and they might not work for touch interaction.

Navigation dropdown with unfold effect

flat navigation dropdown menu with unfold effect.

CSS3 Metro Dropdown Styling

Here’s a quick and dirty CSS3 solution that will give cool metro look and feel to your HTML drop downs without a single line of JavaScript and minimal additional markup.

How to Create a Pure CSS Dropdown Menu

The extras we will add to our drop down menu are markers to notify the user that theres more under that menu item; in this case a drop down list, and will also show you how to extend your drop downs as many times as you want.

Pure CSS3 Dropdown MegaMenu

Pure CSS3 without the use of JavaScript and images.

Pure CSS3 Mega Menu

Pure CSS3 Mega Menu is a clean, fully customizable, responsive solution for creation site navigations. The drop down relies only on CSS/XHTML and comes with customization wizard, unlimited colors, 50 google fonts, 3 forms (search, login and contacts), grid system and much more.

Beth – Mobile-First Responsive Menu

Beth is a pure CSS responsive navigation, optimized for mobile & touch devices. It follows the popular trend of “flat design”, having a simple but usable and easy to integrate design. On mobile devices, the fluid horizontal menu turns into a vertical menu which can be toggled with a click/single tap.

CSS3 animated & responsive dropdown menu

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

CSS3 Responsive menu

By default, this is usual UL-LI drop-down menu. But, if our screen is small (in case of mobile browsers), this menu turns into a click-based menu. In this case your visitors will be able to click to top elements of menu to open submenus.

Soothing CSS3 Dropdown Animation

Colorful CSS3 Animated Navigation Menu

In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts.

CSS3 Flat Mega Menu