CSS3 Dropdown Menu Tutorial

I just designed a new CSS3 dropdown menu , so today i just made a tutorial for the readers to make this awesome dropdown menu.

Features :-

1) Dropdown menu

2) Just one image used

3) CSS3 gradiant effects

4) Search bar included

css3 menu

Html code

<div id='topMenu'>
<a expr:href='data:blog.homepageUrl' id='home'>home</a>
<ul id='navmenu-h'>
<li><a href='search/label/articles/' title='articles'>articles</a></li>
<li><a href='#' title='immigration'>immigration</a></li>
<li><a href='search/label/blogging/' title='blogging'>blogging</a>
</li>
<li><a href='search/label/make money/' title='make money'>make money</a></li>
<li><a href='search/label/migration guide/' title='migration guide'>migration guide</a></li>
</ul>
<!-- begin search box -->
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if(this.value==''){this.value='search site'};' onfocus='if(this.value=='search site'){this.value=''};' type='text'/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>​

 

 

CSS code

/*----------------------------------------------------
{--------}  Top Menu  {--------}
----------------------------------------------------*/
#topMenu {
position: absolute; top: 119px; left: -13px;
background: url(http://1.bp.blogspot.com/_nI2w1Z0MWcE/TQrBKNU0uSI/AAAAAAAAA3s/Wqisw8pbr78/s1600/menu_bg.png);
width: 1005px; height: 58px;
margin: 0 auto;
z-index: 10;
}
#navmenu-h {
margin-left: 15px;
float: left;
}
/*----------------------------------------------------
{--------}  Home Button  {--------}
----------------------------------------------------*/
#home {
background-image:url(http://1.bp.blogspot.com/_nI2w1Z0MWcE/TQrBTlT216I/AAAAAAAAA30/qfKPFbEEJGg/s1600/home_icon.png);
width: 35px; height: 35px;
display: block;
float: left;
text-indent: -9999px;
margin: 8px 0 0 10px;
}
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }
ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
ul#navmenu-h li { float: left; display: inline; position: relative; text-align:left;font-weight:400! important;}
ul#navmenu-h ul li { width: 100%; display: block; }
/* Root Menu */
ul#navmenu-h a {
float: left;
display: block;
color: #ffffff;
font: 15px trebuchet ms,Arial, sans-serif;line-height:42px;font-weight:bold;
text-decoration: none;text-transform:uppercase;
height: 1%;
padding: 6px 12px;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: -moz-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
background-image: -o-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
color: #fff;
padding: 6px 12px;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: -moz-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
background-image: -o-linear-gradient(bottom, #1e201f, #474948);
background: -webkit-gradient(linear, center bottom, center top, from(#1e201f), to(#474948));
background-color: #1e201f;
padding: 0 12px; font-size:13px;line-height:35px;font-family:'droid sans',arial,sans-serif;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;text-align:left;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}
/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
/*--------------------------------------------------------
{--------}  Essential Style  {--------}
---------------------------------------------------------*/
.sf-menu, .sf-menu * {
margin:            0;
padding:        0;
list-style:        none;
}
.sf-menu {
line-height:    1.0;
}
.sf-menu ul {
position:        absolute;
top:            -999em;
width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:            100%;
}
.sf-menu li:hover {
visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:            left;
position:        relative;
}
.sf-menu a {
display:        block;
position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:            0;
top:            2.5em; /* match top ul list item height */
z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:            10em; /* match ul width */
top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:            10em; /* match ul width */
top:            0;
}
/*--------------------------------------------------------
{--------} Search Forms  {--------}
---------------------------------------------------------*/
#searchform {
position:absolute; top: 10px; right: 0;
width:190px;
}
#searchform input {
background:url(http://3.bp.blogspot.com/_nI2w1Z0MWcE/TQrCNfcJaCI/AAAAAAAAA4M/QHbm27NsnNY/s1600/searchbox_bg.png);
border:medium none;
color:#fff;
float:left;
font-size:13px;
padding:9px 3px 7px 15px;
width:130px;
font-family: verdana,Arial, Helvetica, sans-serif;
}
#searchform input#searchsubmit {
background:url(http://1.bp.blogspot.com/_nI2w1Z0MWcE/TQrCZOkALdI/AAAAAAAAA4U/Nd7NRTnq9WQ/s1600/searchbutton.png);
border:medium none;
cursor:pointer;
height:32px;
margin:0;
padding:0;
width:32px;
}

 

Demo

Demo in JSfiddle

 

Hope you would like this tutorial, if you face any problem regarding this tutorial , just leave a comment and i will answer you asap

0
Digg Digg

Comments

  1. Abhishek Jain says:

    Nice creation I like this

  2. Navin Kunwar says:

    Seems awesome anyway to implement it on wordPress.

    • raman2572 says:

      To implement it to wordpress, just find header.php or header-area.php
      Now with the help of firebug find where your top menu code is situated and just replace it with the above html code
      in stylesheet add the above css code

Speak Your Mind

*