Create Pure CSS based Menu – Step by Step Tutorial

After a long time i am going to write the article on CSS and HTML.  In this tutorial i am going to create a pure CSS based Menu with description of lots of CSS property and problems faced by the web developer. One advantage of having CSS based Menu rather than  JavaScript based Menu is that it is very light weight and cross browse compatible. I have used CSS based Menu in my website https://www.jitendrazaa.com

Live Demo – Pure CSS based Menu

Lets consider below HTML code on which we want to create a Menu.

<div class="Menu">
<ul>
	<li>
		<a href="#"> Home</a></li>
	<li>
		<a href="#">Menu 2</a>
<div class="SubMenu">
<ul>
	<li>
		<a href="#">Sub Menu 1</a></li>
	<li>
		<a href="#">Sub Menu 2</a></li>
</ul>
</div></li>
	<li>
		<a href="#">Menu 3</a>
<div class="SubMenu">
<ul>
	<li>
		<a href="#">Sub Menu 3</a></li>
	<li>
		<a href="#">Sub Menu 4</a></li>
</ul>
</div></li>
</ul>

Output of the code look like:

As you can see from above output we need few modifications:
Remove the bullets from the list, make horizontal list and hide the submenu.

.Menu li
{
	/* Dont show the bullet on list*/
	list-style:none;

	/* Make horizontal list */
	float:left;
}
.Menu .SubMenu
{
	display:none;
	position:absolute;
	margin-left:-40px;
}
/* Style for the sub menu */
.SubMenu li
{
	/* Make Verticle list */
	float:none !important;
	width:100px;
	margin-top:5px;
}

CSS code written above is commented and self explanatory.
Now we want to display the sub-menu on the hover of the main-menu. So below CSS will be used:

.Menu li:hover .SubMenu
{
	display:block;
}

Its time to give the style to anchor tag like background color, hover color etc.
Therefore the final CSS will look like:

.Menu li
{
	/* Dont show the bullet on list*/
	list-style:none;

	/* Make horizontal list */
	float:left;
}
.Menu .SubMenu
{
	display:none;
	position:absolute;
	margin-left:-40px;
}
/* Style for the sub menu */
.SubMenu li
{
	/* Make Verticle list */
	float:none !important;
	width:100px;
	margin-top:5px;
}
/*On hover display menu*/
.Menu li:hover .SubMenu
{
	display:block;
}
.Menu a
{
	padding:5px;
	background-color:#fe9900;
}
.SubMenu li a
{
	width:100px;
	float:left;
	padding:5px 10px 5px 20px;
	background-color:#f5e2ba;
}
.SubMenu li a:hover
{
	background-color:#140b5c;
	color:#FFFFFF;
	/* Remove Underline */
	text-decoration:none;
}

And the output is

Pure CSS based menu
Pure CSS based menu

Question : Why CSS Hover property is not working in Internet explorer?
This is the question lots of time asked by the developer. By default IE supports the hover property for the anchor tag and if you want to tell IE to support hover property for the remaining elements also, we must introduce the DOCTYTPE tag at the starting of the html document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Live Demo – Pure CSS based Menu

Posted

in

by

Tags:


Related Posts

Comments

2 responses to “Create Pure CSS based Menu – Step by Step Tutorial”

  1. hamed Avatar
    hamed

    Thanks u very Much Jitendra, it’s nice and helpfullllllllllllll 🙂

  2. Sonal Avatar
    Sonal

    Thanks so much, you saved the day, I got it done 🙂

Leave a Reply to SonalCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading