Free HTML5 Dropdown Menu Bar Tutorial and Addons


The powers of HTML5 are really amazing. There was a time when you needed jQuery to make a superb navigation bar, but not anymore. A pure HTML5 dropdown menu can sufficiently deliver the best user experience. Today’s post is about creating such HTML5 menu bars and navigation bars.

An HTML5 dropdown menu can be requirement of any website. Single-story menus sometimes are not enough and we need a dropdown menu. Thankfully, HTML5 has the power to create the most useful menus.

This post contains tutorial to create and edit an HTML5 dropdown menu, and a list of 20 best HTML5 menu bars that you can use in your website.

How to edit an HTML5 Dropdown Menu

Note: This section of for beginning web designers, if you are already well-versed at HTML/CSS, feel free to skip ahead.

When we say pure HTML, what we mean is that it does not include JavaScript. It does not mean that we are negating CSS.

The basic difference between JavaScript menus and pure HTML menus is that pure HTML menus are 100 per cent readable for search engines, so they give high SEO value. And these days, HTML5 and CSS3 has given enough transitions and effects to make the coolest navigation bars without requiring JavaScript or jQuery.

Understanding Coding Method

HTML: I can’t define all the functions, as that will take too much time but I’m describing the basic structure of an HTML5 navigation bar.

        <li><a class="main" href="#">Option 1</a></li>
        <li><a class="main" href="#">Option 2</a></li>
        <li><a class="main" href="#">Option 3</a></li>
        <li><a class="main" href="#">Option 4</a></li>

<nav> is the basic tag in which we put all the navigation bar. Rest is just <ul> which means unordered list and <li> which means list item.

For creating a multi-level menu, we just add another unordered list inside a list item. Here’s the example.

        <li><a class="main" href="#">Option 1</a></li>
        <li><a class="main" href="#">Option 2</a>
                <li><a class="sub" href="#">Sub-option 1</a></li>
                <li><a class="sub" href="#">Sub-option 2</a></li>
                <li><a class="sub" href="#">Sub-option 3</a></li>
        <li><a class="main" href="#">Option 3</a></li>
        <li><a class="main" href="#">Option 4</a></li>

Of course, this is the just the tip of the iceberg, but you know the basics now. Time to check out CSS.

CSS: CSS is pretty simple and straightforward. That’s because the same set of commands can be applied anywhere, so if you know how to apply border at an image, you can apply border to anything. This is why I’m not putting down any specific properties, I’m just describing the basic CSS structure of a dropdown menu.

First thing we need to do is establish that all sub-menus must remain hidden unless they have the pointed on them. Here’s the CSS for them.

nav ul ul {
    display: none;

    nav ul li:hover > ul {
        display: block;

Now set the properties of everything else.

nav ul {
nav ul li {
    float: left;
    nav ul li:hover {

The process carries on like this. I’m sure you get the picture now. If you still need any help, you can use the comments section below. I’ll be glad to help.

Pure HTML Menu Bars

Creating HTML/CSS Only Horizontal Navigation

Even though this is a very simple design, this is very powerful, customizable and SEO friendly navigation bar. If you are a beginner, you should start from this menu.

Creating CSS Only Horizontal Navigation

Live Demo | Download

Advanced HTML/CSS Menu

This is uses a unique effect from CSS3. When you rollover any menu item, all the nonactive items of the menu get blurred. Sounds simple enough but the results are not bad. Have a look.

Advanced CSS Menu Trick

Live Demo | Download

Stunning Icon Based Menu

No need for jQuery or JavaScript; no need to launch Photoshop. And let’s take it up a notch by including a great icon font to add some character to our menu.

Create a stunning menu in CSS3

Live Demo | Download

Multi-Level Responsive Navigation Menu

A menu system using the famous bootstrap CSS framework. BootM is a pure CSS based navigation system, its responsive, supports unlimited levels and icons as well.

Pure CSS Navigation Bar

Live Demo | Download

Stylishly Simple Nav Bar

There was a time when such designs were possible only with images and JavaScript, but that’s not the case these days. This is a download plus a brilliant tutorial.

How To Create a Pure CSS Dropdown Menu

Live Demo | Download

Slicked HTML/CSS Menu

This is probably the coolest navigation bar in this list. This is a cross browser tested, super cool, super fast, no images, no JavaScript menu that is surely to wow your clients and visitors.

Create a Slick Menu using CSS3

Live Demo | Download

LavaLamp Menu

You might have worked with jQuery’s LavaLamp plugin, but this CSS3 based navigation bar does not use that tutorial. It is made using pure HTML5 and CSS3.

Pure CSS3 LavaLamp Menu

Live Demo | Download

Watercolor Themed Image Based Menu

Turning a watercolor based PSD navigation design into a CSS menu bar.

Advanced CSS3 Menu

Live Demo | Download

Fun Animated Navigation Menu

Learn how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions.

Fun Animated Navigation Menu With Pure CSS

Live Demo | Download

Horizontal Drop-Down Menu

A responsive horizontal drop-down menu inspired by the’s menu.


Live Demo | Download

Slide Down Box Menu with Images

This is a tutorial for creating a unique sliding box navigation.


Live Demo | Download

Elegant Dark CSS3 Menu

This is a CSS3 based HTML5 dropdown menu.


Live Demo and Download

CSS3 Minimalistic Navigation Menu

A simple CSS3 animated navigation menu, which degrades gracefully in older browsers.


Live Demo | Download

Navigation dropdown

Flat navigation dropdown menu with unfold effect.


Live Demo and Download

Full CSS3 Dropdown Menu

This is a vertical menu designed for responsive websites.


Live Demo and Download

Icon based dropdown menu

As the title suggests, this menu contains built-in set of icons that add to its beauty. I also like its readability value.


Live Demo and Download

Hamburger Button

This menu drop downs, using a beautiful jQuery effect, from a big enough hamburger icon that can be visible from outer space.


Live Demo and Download

Simple Drop Down Effect

The idea is to transform a normal select input into something more appealing with a jQuery plugin.

Simple Drop Down Effect

Live Demo | Download

That’s all folks. See you again.

create free website wix below post

Further Related Readings

  1. saima June 16, 2015 at 1:25 pm

    Sir, it’s great article sir. I want to your help to earn online. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyrights © 2016 - Designzzz. All Rights Reserved