Create a css3 dropdown menu in wordpress

In this tutorial i will show you how to create a apple style css3 drop down menu in wordpress.Ok lets start, at  first i use this code to create navigation in wordpress.

Paste this code in your header.php

Some jQuery required to show/hide the drop down menu’s.Paste this code before wp_head();

Now refresh your browser your web site may look like this.

Now the css part.Place this css in your style.css

[css]

#navigation{ margin: 0; padding:10px; display: block; float: left; margin: 0 auto; width: 940px; } #nav { margin: 0; padding: 7px 6px 0; line-height: 100%; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); background: #F2F2F2; /* for non-css3 browsers / filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#7a7a7a'); / for IE / background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#7a7a7a)); / for webkit browsers / background: -moz-linear-gradient(top,  #F2F2F2,  #7a7a7a); / for firefox 3.6+ / border: solid 1px #6d6d6d; } #nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } / main level link */ #nav a {

font-family:Georgia, Times, serif; font-size:18px; font-weight: bold; color: #DBD7D8; text-decoration: none; display: block; padding:  8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

} /* main level link hover / #nav .current a, #nav li:hover > a { background: #d1d1d1; / for non-css3 browsers / filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); / for IE / background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); / for webkit browsers / background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); / for firefox 3.6+ / color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } / sub levels link hover / #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover { background: #BEC1C2 !important; / for non-css3 browsers / filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#BEC1C2', endColorstr='#F0F5F7'); / for IE / background: -webkit-gradient(linear, left top, left bottom, from(#BEC1C2), to(#F0F5F7)) !important; / for webkit browsers / background: -moz-linear-gradient(top,  #BEC1C2,  #F0F5F7) !important; / for firefox 3.6+ / color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, .1); } / level 2 list / #nav ul { background: #ddd; / for non-css3 browsers / filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); / for IE / background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); / for webkit browsers / background: -moz-linear-gradient(top,  #fff,  #cfcfcf); / for firefox 3.6+ / display: none; margin: 0; padding: 0; width: 200px; position: absolute; top: 35px; left: 0; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } / dropdown / #nav li:hover > ul { display: block; } #nav ul li { float: none; margin: 0; padding: 0; } #nav ul a { font-weight: normal; text-shadow: 0 1px 1px rgba(255, 255, 255, .9); } / level 3+ list / #nav ul ul { left: 181px; top: -3px; } / rounded corners for first and last child / #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } / clearfix */ #nav:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

html[xmlns] #nav { display: block; }

• html #nav { height: 1%; }

[/css]

Now visit your final look!

In non css3 browser it may be look like this.