Sunlight Drop Down Menu Posted by zendersto | at Wednesday, July 15, 2009

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!

• View live demo


• Download

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]-->
<ul>
<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>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<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]-->
<ul>
<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>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<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]-->
<ul>
<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>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<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]-->
<ul>
<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>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<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]-->
<ul>
<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>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<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]-->
<ul>
<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>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

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