Trick Dropline Menus

Friend dah lama nih gak posting akhirnya kangen juga posting.Saya ada tips buat anda ikuti aja stepnya.

1-Login ke account blogger anda.
2-Click Layout--->
3-Click Edit HTML
4-Letakkan kode dibawah ini sebelum ]]></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.sumbloggers.com.
Follow the instruction to make this menu on mutiaramail.blogspot.com
=================================================================== */
#nav {
height:36px; position:relative; font-family:arial, verdana, sans-serif; font-size:11px;z-index:500;
}
#nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap;
}
#nav li {
float:left; background:url(blank_over_p.gif);
}
#nav .select a {
display:block; height:36px; float:left; background: url(blank_p.gif); padding:0 0 0 15px; text-decoration:none; line-height:25px; white-space:nowrap; color:#ddd;
}
#nav .select a b {
display:block; padding:0 30px 10px 15px; background:url(blank_p.gif) right top;
}
#nav .select li:hover a {
background: url(blank_over_p.gif); padding:0 0 0 15px; line-height:27px; cursor:pointer; color:#fff;
}
#nav .select li:hover a b {
display:block; padding:0 30px 9px 15px; background:url(blank_over_p.gif) right top; cursor:pointer;
}
#nav .sub {
display:none; margin:0; padding:0 0 0 60px;list-style:none;
}
#nav .sub li {background:transparent;}
#nav .select li:hover .sub {
height:18px; display:block; position:absolute; float:left; width:750px; top:28px; left:0; text-align:center;
}
#nav .select li:hover .sub li a {
display:block;height:18px; line-height:16px; float:left; background:transparent url(transparent.gif); padding:0 16px; margin:0; white-space:nowrap; border:1px solid #000; border-color:#888 #777 #666 #ddd; color:#888;font-size:10px;
}
#nav .select li:hover .sub li a:hover {
color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px;
}
5-Letakkan kode dibawah ini sebelum </head> tag:
<script src="stuHover.js" type="text/javascript"></script>
6-Letakkan kode dibawah ini pada HTML anda :
<div id='nav'>
<ul class='select'><li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>Joseph Turner</b></a>
<ul class='sub'>
<li><a href='#'>Fishermen at Sea</a></li>
<li><a href='#'>The Shipwreck</a></li>
<li><a href='#'>The Vale of Ashburnham</a></li>
<li><a href='#'>Crossing the Brook</a></li>
</ul>
</li>
<li><a href='#'><b>John Constable</b></a>
<ul class='sub'>
<li><a href='#'>The Hay Wain</a></li>
<li><a href='#'>Brighton Beach</a></li>
<li><a href='#'>Malvern Hall</a></li>
<li><a href='#'>Salisbury Cathedral</a></li>
<li><a href='#'>Weymouth Bay</a></li>
</ul>
</li>
<li><a href='#'><b>Henri Matisse</b></a>
<ul class='sub'>
<li><a href='#'>The Girl with Green Eyes</a></li>
<li><a href='#'>The Dream</a></li>
<li><a href='#'>Woman in Blue</a></li>
<li><a href='#'>The Yellow Dress</a></li>
<li><a href='#'>The Piano Lesson</a></li>
</ul>
</li>
<li><a href='#'><b>Mutiaramail</b></a>
<ul class='sub'>
<li><a href='http://mutiaramail.blogspot.com/2008/12/about-me.html'>About Mutiaramail</a></li>
<li><a href='http://mutiaramail.blogspot.com'>Need for help</a></li>
<li><a href='http://sumbloggers.blogspot.com'>Blog Invest</a></li>
<li><a href='http://mutiaramail.blogspot.com'>Css Menu</a></li>
<li><a href='http://mutiaramail.blogspot.com'>How to make this menu?</a></li>
</ul>
</li>
</ul>
</div>
7-Download perlengkapannya jangan lupa ganti kode yang berwarna biru.

Download

Related With: