ARTICLE :
 

Simple HTML drop down hover menu using just CSS. No JavaScript !

by RaKumar on June 30th, 2011

Introduction

This article is to demonstrate how to create the simplest HTML dropdown hover menu using just CSS and HTML. No Javascript is required; however, Javascript could be used to support older browsers like IE6. This CSS menu technique is tested with IE7+, Firefox, Safari, Opera and Chrome browsers.

Background

There are hundreds of HTML dropdown hover menu techniques that you can find over the internet. And I am not trying to reinvent the wheel here but trying to come with the most simplest technique to create HTML Hover Menu using just Cascading Style Sheet (CSS). No Javascript is used in this demo and it works great with most of the browsers.

Detail

In this article, we will go over the most simplest technique to create HTML Hover menu by just using CSS. We will be taking advantage of CSS hover selector - element:hover{}. So, this technique will not work with any browser that does not support element:hover style.

To display the menu, we will be using the HTML bullet list control <ul><li>but we will use some style to hide the actual bullet so that it looks like a real menu.

Html structure of the menu:
<ul class="cssMenu">
	<li>
		<a href="#">menuItem1</a>           
		<ul>
			<li><a href="#">item1</a></li>
			<li><a href="#">item2</a></li>
			<li><a href="#">item3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">menuItem1</a>           
		<ul>
			<li><a href="#">item1</a></li>
			<li><a href="#">item2</a></li>
			<li><a href="#">item3</a></li>
		</ul>
	</li>
</ul>

In this example, we will be using multiple bullet lists to construct the menu items.

Then we will use CSS to actually hide the bullet and display like a real menu.

To hide bullet, we will use CSS list-style:none:
ul.cssMenu, ul.cssMenu ul
{
	list-style:none;
	margin:0; padding:0;
	position: relative;
}

Initially menu items are hidden using CSS display:none.
ul.cssMenu ul 						
{ 
        display:none; /*initially menu item is hidden*/
        position: absolute; /*absolute positioning is important for menu to float*/
}

Then on CSS hover effect, menu items will be displayed:
/* Hover effect for menu*/
ul.cssMenu li:hover > ul 			
{ 
	display:block;
}

When you keep everything, you get a pretty HTML Dropdown Hover menu using just CSS. Please check the attachment for the demo.


Click here to view the demo

Conclusion

Just using CSS, we can create simplest CSS based HTML Dropdown Hover menu. This menu supports multiple levels of menu items. Please provide any feedback or comment that you have.

Download

Click here to download source code

Author:

Profile Photo
RaKumar
Date: June 30th, 2011

Comments:



Profile Photo
Commented by Tim Meagher
on November 27th, 2012 at 10:51:02 EST
Very helpful & easy to integrate - thanks!


Profile Photo
Commented by Sigrid Omila
on January 2nd, 2013 at 20:49:42 EST
Hi RaKumar! I just wanted to ask about something. what if i want to place a pdf file on item1 in menu1. an di wanted it to be displayed on the same page ate the bottom part. By the way, the code was very helpful! thanks!

Profile Photo
Commented by Sigrid Omila
on January 2nd, 2013 at 21:08:32 EST
Hi RaKumar! I just wanted to ask about something. what if i want to place a pdf file on item1 in menu1. an di wanted it to be displayed on the same page ate the bottom part. By the way, the code was very helpful! thanks!

Profile Photo
Commented by RaKumar
on January 3rd, 2013 at 12:42:07 EST
PDF file is not HTML. This menu is HTML based. When you link to pdf, you are rendering entire PDF file. So, if you want menu on top of PDF file, you have to embed PDF file into HTML page using IFrame or some other technique.

Profile Photo
Commented by Arjun Reddy
on January 26th, 2013 at 20:03:19 EST
Hi Rakumar, It is really amazing to achieve this just with CSS. suppose I hover on menu1 and it will show the drop down with those menu items so now I click on one of menu item in the drop down then what I am looking for is that entire menu1 with menu items should appear on the left side navigation area of the page with the selected menu item highlighted similarly if I choose menu item from menu2 then that entire menu section appear on left side of page with selected item highlighted.

Please let me know the code to acheive this functionality. I appreciate you help.
Thanks

Profile Photo
Commented by Mike Tran
on April 18th, 2013 at 20:18:07 EST
hey could you help me i dont understand im trying to this for tumblr blog, so the 3 css code do i post that under the css in the html ?

Profile Photo
Commented by CoolAlexa Bebiezz
on May 6th, 2013 at 05:24:02 EST
Adobe Photoshop Tutorials For FREE! www.adobephotoshoptutorialz.com

Earn extra money at home taking online surveys http://bit.ly/XQ5vRJ

Profile Photo
Commented by Rd Nard
on May 11th, 2013 at 09:12:42 EST
Thats really a great code. i wander why i had not come here to look for something simple as that!

Profile Photo
Commented by Rd Nard
on May 11th, 2013 at 09:39:59 EST
Thats really a great code. i wander why i had not come here to look for something simple as that!

Profile Photo
Commented by Rd Nard
on May 11th, 2013 at 09:40:56 EST
could it be possible that something is added to that code, to make it drop down above other divs, or do i need to check my other codes?


Profile Photo
Commented by Haritha Gubbala
on November 5th, 2013 at 00:18:07 EST
Hi RaKumar! i want to place a description for item1 in menu1, and i wanted it to be displayed on the same page ate the bottom part. BTW The code was very helpful!

Profile Photo
Commented by Cephas Mumba
on November 13th, 2013 at 02:11:14 EST
Thank your codes are very helping

Profile Photo
Commented by Samuel Gathiu
on August 20th, 2014 at 09:42:00 EST
I thought it could only be achieved through JavaScript which I'm yet to complete learning. You made me feel like I've known all coding. I hope I'll not stop studying JavaScript. Thanks!

Profile Photo
Commented by Samuel Gathiu
on August 20th, 2014 at 09:43:23 EST
I thought it could only be achieved through JavaScript which I'm yet to complete learning. You made me feel like I've known all coding. I hope I'll not stop studying JavaScript. Thanks!