CSS only Dropdown menu

Standard

Hi Friends!

Today i am gonna to talk about how to create CSS ONLY DROPDOWN MENU for our web project. I know you had been though lots of dropdown menus, but many use CSS/Javascript/JQuery dropdown menus. But what today i am gonna to show you how to create pure css dropdown menu.

Below given is the screen shot which we will get after writing down CSS and HTML code about which i am going to discuss later.

CSS only Dropdown menu

Let me first show you the CSS code i had created for above dropdown menu:


/*------ Main Nav starts -------*/

 .mainNav
{
    height: 40px;
    border: solid 1px #a6a6a6;
	background: #a6a6a6;
	background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#f7f7f7));
	background: -moz-linear-gradient(top,  #d3d3d3,  #f7f7f7);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#f7f7f7');
    margin: 40px 15px;
}

.mainNav ul
{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.mainNav ul li
{
    display: inline-block;
    padding: 0px;
    margin: 0;
}

.mainNav ul li.nav
{
    font-family: SegoeUI;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    line-height:40px;
    padding: 0 20px;
    border-right:1px solid #d3d3d3;
}

.mainNav ul li.nav:hover
{
    background: rgba(8,102,198,0.8);
    border-right:1px solid rgba(6,80,155,1);
    cursor:pointer;
    color:#fff !Important;
}

.mainNav ul li.nav span
{
    cursor:pointer;
}

.mainNav ul li.nav .dropdown
{
    display:none;
}

.mainNav ul li.nav:hover .dropdown,
.mainNav ul li.nav:hover .dropdown:focus
{
    position:absolute;
    display: block;
    background: rgba(8,102,198,0.8);
    height:auto;
    max-width:150px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    margin:0 0 0 -20px;

}

.mainNav ul li.nav:hover .dropdown ul
{
    list-style: none;
    padding: 0px;
    margin:0;
    overflow:hidden;
}

.mainNav ul li.nav:hover .dropdown ul li
{
    width:100%;
    padding:0px;
    margin: 0px;
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav
{
    display:inline-block;
    min-width:100%;
    font-family: SegoeUI;
    color: #fff;
    font-size: 12px;
    padding:0 0 0 25px;
    line-height:30px;
    text-transform:none;
    border-bottom:1px dotted rgba(68,208,254,0.8);
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav:hover
{
    background-color: rgba(6,80,155, 0.4);
}

/*------- Menu icons starts-----------*/

li.file
{
    background:url(../Images/Icons/1.png) no-repeat 4px center;
}

li.chart
{
    background:url(../Images/Icons/11.png) no-repeat 4px center;
}

li.home
{
    background:url(../Images/Icons/17.png) no-repeat 4px center;
}

li.meeting
{
    background:url(../Images/Icons/18.png) no-repeat 4px center;
}

li.stickynote
{
    background:url(../Images/Icons/26.png) no-repeat 4px center;
}

li.save
{
    background:url(../Images/Icons/22.png) no-repeat 4px center;
}

li.briefcase
{
    background:url(../Images/Icons/27.png) no-repeat 4px center;
}

li.print
{
    background:url(../Images/Icons/16.png) no-repeat 4px center;
}

/*------- Menu icons ends-----------*/

/*------ Main Nav Ends -------*/

and now let me show you the HTML code for dropdown menu:

</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>:: Multi level DD menu ::</title>
 <link href="CSS/Menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="mainWrapper">
 <div class="mainNav boxShadow borderRadius">
 <ul>
 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Home</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">About Us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">products</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">services</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">FAQ's</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Careers</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New Jobs</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Company Tour</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Why to join us</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Submit resume</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Contact us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">Location</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Office Address</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Enquiry</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </div>
</body>
</html>
<pre>

Create a HTML page say index.html with in any editor of your choice and paste the HTML code with in it. Now copy the CSS code and create new css file namely “Menu” and put it is CSS folder of the project.

Note i have used some dummy icon images you can use your own and name them as per your needs and put them within the image folder. The Icon image size is 16×16. I had used the icons from site . I hope you will like this and i am eagerly waiting for your comments/suggestions and i would like to mention that all are free to use this code in their projects and update the same.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s