A Simple CSS Drop Down Menu

Now a days I have been experimenting with CSS3 features, with some advanced CSS3 selectors we can easily Create a Drop Down Menu with pure CSS without using any fancy background images and JavaScript.

In this tutorial I will explain step by step procedure to create a simple drop down menu  with pure CSS.

Here is the Simple Drop Down Demo.

HTML Drop Down Menu Structure: #

First we will create HTML structure

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
                                     <ul>
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
				      </ul>
				<li><a href="#">Fun</a></li>
				<li><a href="#">freebies</a></li>
			</ul>
		</li>
		<li><a href="#">Archives</a>
			<ul>
				<li><a href="#">January</a></li>
				<li><a href="#">February</a></li>
			</ul>
		</li>
		<li><a href="#">AboutMe</a></li>
	</ul>
</nav>

The HTML structure as follows

 I created two sub Menus for Articles and Archives, these sub menus can be shown once the parent menu liks is activated by HOVER.

And under Articles>Web Design I have sub-sub-menu (HTML and CSS) this links are shown horizontally from the first drop down as shown in Drop Down Menu.

CSS Code For Drop Down Menu: #

Now we will write the CSS for the HTML code.

nav ul ul {
	display: none;
}

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

First we will hide the first set of sub links Articles>Web Design,Fun,Freebies and Archives>January,February using “display:none”  attribute. and to make them appear we have to change the “display”  attribute to “block” on HOVER of LI.

The child selector  > make sure only the child UL of LI are visible rather than all other UL elements or other sub menus.

Here is the Demo

And in next step few lines of CSS code to make it look like Menu

        nav ul
        {
            list-style: none;
            position: relative;
            display: inline-table;
        }
        nav ul li a
        {
            display: block;
            padding: 25px 40px;
            text-decoration: none;
        }
        nav ul li
        {
            float: left;
        }
        nav ul ul li
        {
            position: relative;
            float: none;
        }

First we will remove bullets for list elements by adding “list-style:none” to “nav ul” element. And “position:relative”  attribute will allows us to position sub menu elements according to the Main Menu. “display:inline-table” attribute allows us to display main navigation elements to display as an inline-table.

I have added padding to anchor elements to separate links and I removed decoration (underline for anchor elements) with  “text-decoration:none” attribute.

To make it look like Menu side by side I added “float:left” attribute to LI elements.(Main Navigation Bar)

For Drop Down elements I added “float:none” attribute to “nav ul ul li” and also “position:relative”.

Here is the Demo.

Now it has a look of Drop Down Menu But as you move from one link to other links the elements are dancing from right to left and also secondary sub menu elements are directly appearing below the LI elements. To fix this we will add few lines of CSS code

        nav ul ul
        {
            position: absolute;
            top: 100%;
        }
        nav ul ul ul
        {
            position: absolute;
            left: 100%;
            top: 0;
        }

For first  sub-menu elements I have added “position:absolute” and “top:100%”. So the drop down elements will appear directly below to the relative parent LI.

And For Secondary sub-sub-menu  I have added “position:absolute” attribute and “left:100%”. So the drop down elements will appear exactly right side of the relative parent LI element.

Here is the Demo.

The logic part is completed now we will apply some styles and colors to Make it stylish Drop Down Menu as shown in the first Demo.

I have used few CSS3 features like gradient etc. The code is simple and easy to understand, added color to main navigation menu and then on HOVER changed the colors. Here is the code.

nav ul
        {
            background: #0052a4;
            background: linear-gradient(top, #0052a4 0%, #0052a4 100%);
            background: -moz-linear-gradient(top, #0052a4 0%, #0052a4 100%);
            background: -webkit-linear-gradient(top, #0052a4 0%,#0052a4 100%);
            box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
            border-radius: 10px;
        }
        nav ul li:hover
        {
            background: #C0C0C0;
            background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
        }
        nav ul ul
        {
            background: #C0C0C0;
            background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
            background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
            border-radius: 0px;
            padding: 0;
        }
        nav ul ul li
        {
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
        }
        nav ul li a
        {
            color: #FFF;
        }
        nav ul li:hover a
        {
            color: #000;
        }

        nav ul ul li a
        {
            color: #fff;
        }
        nav ul ul li a:hover
        {
            color: #fff;
            background: #0052a4;
        }

I tested it in almost all modern web browsers working fine.If you face any issues let me know.

Here is the Final Demo

Demo For Drop Down Menu

I hope you enjoyed this article If so share with your friends and also subscribe to my blog and connect me at social networks.