Sunlight Drop Down Menu

Hi everyone,today I will bring you a next beautiful type of CSS menu name Sunlight Menu-The next version of drop down menu series,you can review the previous Drop Down Menu-Violet Style if you like.
Have you ever seen this menu before?As its name, why is it called Sunlight?

Because it has a stylish body with the bright and lovely color.This is a drop down menu with 1 sub, very match for the photography blog.

Alright let's do it!

1.First, you have to add this CSS code before the ]]></b:skin> tag

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated html
is available at http://www.stunicholls.com.
Follow the instruction to make this menu on Zenplate.blogspot.com
=================================================================== */
.prodrop5 {padding:0 0 0 32px; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; border-bottom:5px solid #fc0;}

.prodrop5 li.top {display:block; float:left;}

.prodrop5 li a.pos1 {background:url(shades/home_0.gif); width:53px; height:30px; display:block; text-indent:-99999px;}
.prodrop5 li a.pos2 {background:url(shades/help_0.gif); width:50px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos3 {background:url(shades/abbey_0.gif); width:88px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos4 {background:url(shades/please_0.gif); width:124px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos5 {background:url(shades/revolver_0.gif); width:70px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos6 {background:url(shades/rubber_0.gif); width:94px; height:30px; display:block;text-indent:-99999px;}
.prodrop5 li a.pos7 {background:url(shades/yellow_0.gif); width:124px; height:30px; display:block;text-indent:-99999px;}

.prodrop5 li.p1 {background:url(shades/home_1.gif);}
.prodrop5 li.p2 {background:url(shades/help_1.gif);}
.prodrop5 li.p3 {background:url(shades/abbey_1.gif);}
.prodrop5 li.p4 {background:url(shades/please_1.gif);}
.prodrop5 li.p5 {background:url(shades/revolver_1.gif);}
.prodrop5 li.p6 {background:url(shades/rubber_1.gif);}
.prodrop5 li.p7 {background:url(shades/yellow_1.gif);}

.prodrop5 li.current a.pos1,
.prodrop5 li.current a.pos1:hover {background:url(shades/home_2.gif);}
.prodrop5 li.current a.pos2,
.prodrop5 li.current a.pos2:hover {background:url(shades/help_2.gif);}
.prodrop5 li.current a.pos3,
.prodrop5 li.current a.pos3:hover {background:url(shades/abbey_2.gif);}
.prodrop5 li.current a.pos4,
.prodrop5 li.current a.pos4:hover {background:url(shades/please_2.gif);}
.prodrop5 li.current a.pos5,
.prodrop5 li.current a.pos5:hover {background:url(shades/revolver_2.gif);}
.prodrop5 li.current a.pos6,
.prodrop5 li.current a.pos6:hover {background:url(shades/rubber_2.gif);}
.prodrop5 li.current a.pos7,
.prodrop5 li.current a.pos7:hover {background:url(shades/yellow_2.gif);}
.prodrop5 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.prodrop5 a:hover {visibility:visible; position:relative; z-index:200;}
.prodrop5 li:hover {position:relative; z-index:200;}
.prodrop5 li a.top_link:hover {background:transparent;}
.prodrop5 li:hover > a.top_link {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.prodrop5 ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.prodrop5 :hover ul {left:0; top:30px; background:url(shades/sub_back.gif); padding:3px; white-space:nowrap; height:auto; width:auto; z-index:300;}
.prodrop5 :hover ul li {display:block; height:20px; position:relative; font-weight:normal; width:auto;}
.prodrop5 :hover ul li a {display:block; font-size:12px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#000; background:transparent; text-decoration:none;}
.prodrop5 :hover ul li a:hover {text-decoration:underline;}

Look at the red code, they are the places to put the icon images.You can get them all in the Download button.

2.Next , Save and create a HTML/javascript then paste this code in it:

<div id="beatles">
<ul class="prodrop5">
<li class="top p1"><a href="#" class="top_link pos1">Home</a></li>
<li class="top p2"><a href="#" class="top_link pos2">Help!<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="http://zenplate.blogspot.com/2008/10/contact-me.html">Need Zen's help</a></li>
<li><a href="http://zenplate.blogspot.com">Zenplate</a></li>
<li><a href="http://zenplate.blogspot.com/2008/10/contact-me.html">Contact Zen</a></li>
<li><a href="http://zenplate.blogspot.com/2008/06/advertiser-on-zenplate.html">Advertise on Zenplate</a></li>
<li><a href="http://zenplate.blogspot.com/2008/12/about-me.html">About Zen</a></li>
<li><a href="http://twitter.com/zendersto">Follow Zen on Twitter</a></li>
<li><a href="#">Zenplate's Feed</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/css%20menu">Other Menus</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/Jquery%20slide">Jquery tips for blogspot</a></li>
<li><a href="http://zenplate.blogspot.com">What can you find on Zenplate?</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/Premium%20Blogger%20Template">Premium Blogger Template</a></li>
<li><a href="http://www.zenplate.blogspot.com/search/label/Css%20body">Let's design you blog</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top p3"><a href="#nogo3" class="top_link pos3">Abbey Road<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#">Come Together</a></li>
<li><a href="#">Something</a></li>
<li><a href="#">Maxwell's Silver Hammer</a></li>
<li><a href="#">Oh! Darling</a></li>
<li><a href="#">Octopus's Garden</a></li>
<li><a href="#">I Want You (She's So Heavy)</a></li>
<li><a href="#">Here Comes The Sun</a></li>
<li><a href="#">Because</a></li>
<li><a href="#">You Never Give Me Your Money</a></li>
<li><a href="#">Sun King</a></li>
<li><a href="#">Mean Mr. Mustard</a></li>
<li><a href="#">Polythene Pam</a></li>
<li><a href="#">She Came In Through The Bathroom Window</a></li>
<li><a href="#">Golden Slumbers</a></li>
<li><a href="#">Carry That Weight</a></li>
<li><a href="#">The End</a></li>
<li><a href="#">Her Majesty</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top p4"><a href="#nogo4" class="top_link pos4">Please Please Me<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#">I Saw Her Standing There</a></li>
<li><a href="#">Misery</a></li>
<li><a href="#">Anna (Go To Him)</a></li>
<li><a href="#">Chains</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Ask Me Why</a></li>
<li><a href="#">Please Please Me</a></li>
<li><a href="#">Love Me Do</a></li>
<li><a href="#">P.S. I Love You</a></li>
<li><a href="#">Baby It's You</a></li>
<li><a href="#">Do You Want To Know A Secret</a></li>
<li><a href="#">A Taste Of Honey</a></li>
<li><a href="#">There's A Place</a></li>
<li><a href="#">Twist And Shout</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top p5"><a href="#nogo5" class="top_link pos5">Revolver<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#">Taxman</a></li>
<li><a href="#">Eleanor Rigby</a></li>
<li><a href="#">I'm Only Sleeping</a></li>
<li><a href="#">Love You To</a></li>
<li><a href="#">Here, There And Everywhere</a></li>
<li><a href="#">Yellow Submarine</a></li>
<li><a href="#">She Said She Said</a></li>
<li><a href="#">Good Day Sunshine</a></li>
<li><a href="#">And Your Bird Can Sing</a></li>
<li><a href="#">For No One</a></li>
<li><a href="#">Dr. Robert</a></li>
<li><a href="#">I Want To Tell You</a></li>
<li><a href="#">Got To Get You Into My Life</a></li>
<li><a href="#">Tomorrow Never Knows</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top current p6"><a href="#nogo6" class="top_link pos6">Rubber Soul<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#">Drive My Car</a></li>
<li><a href="#">Norwegian Wood</a></li>
<li><a href="#">You Won't See Me</a></li>
<li><a href="#">Nowhere Man</a></li>
<li><a href="#">Think For Yourself</a></li>
<li><a href="#">The Word</a></li>
<li><a href="#">Michelle</a></li>
<li><a href="#">What Goes On</a></li>
<li><a href="#">Girl</a></li>
<li><a href="#">I'm Looking Through You</a></li>
<li><a href="#">In My Life</a></li>
<li><a href="#">Wait</a></li>
<li><a href="#">If I Needed Someone</a></li>
<li><a href="#">Run For Your Life</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top p7"><a href="#nogo7" class="top_link pos7">Yellow Submarine<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<li><a href="#">Yellow Submarine</a></li>
<li><a href="#">Only A Northern Song</a></li>
<li><a href="#">All Together Now</a></li>
<li><a href="#">Hey Bulldog</a></li>
<li><a href="#">It's All Too Much</a></li>
<li><a href="#">All You Need Is Love</a></li>
<li><a href="#">Pepperland</a></li>
<li><a href="#">Sea Of Time</a></li>
<li><a href="#">Sea Of Holes</a></li>
<li><a href="#">Sea Of Monsters</a></li>
<li><a href="#">March Of The Meanies</a></li>
<li><a href="#">Pepperland Laid Waste</a></li>
<li><a href="#">Yellow Submarine in Pepperland</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Alright now you can change by your own words.Save and join, hope you like this.Please offer me a back link for thanks.Thank you very much and don't forget to subscribe me to receive more great tips.

Requirements : CSS
Website: http://www.stunicholls.com
Bring to Blogger : Zenplate


Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard