Tutorial-Onlineku.Buat para blogger yang suka dengan menu dropdown silahkan ikuti tutorial berikut,Untuk cara penempatanya silahkan sesuaikan dg tamplate blogspot sobat sendiri.
Fict menu-1
fict menu-2
fict menu-3
fict menu-4
fict menu-5
fict menu-6
Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3.Centang EXPAN WIDGET
3. Kemudian cari kode ]]></b:skin>
4. Vaste code css di bawah ini tepat di atas code ]]></b:skin>
5.Untuk link image dropdown silahkan download kelima image di atas.
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#cssmenu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px;
}
#cssmenu li a{
background:#333333 url('images/seperator.gif') bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#cssmenu li a:hover, #cssmenu ul li:hover a{
background: #2580a2 url('images/hover.gif') bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
#cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
#cssmenu li:hover li a{
background:none;
}
#cssmenu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
#cssmenu p{
clear:left;
}
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Ditulis Oleh : Anonymous
Artikel Css Drop Down Menu Grey Impression Blogspot ini ditulis oleh Anonymous pada hari . Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Css Drop Down Menu Grey Impression Blogspot dapat Anda sampaikan melalui kotak komentar dibawah ini.
Anda sedang membaca artikel tentang Css Drop Down Menu Grey Impression Blogspot dan anda bisa menemukan artikel Css Drop Down Menu Grey Impression Blogspot ini dengan url http://tutorial-onlineku.blogspot.com/2012/10/css-drop-down-menu-grey-impression.html. Anda boleh menyebarluaskan atau mengcopy artikel Css Drop Down Menu Grey Impression Blogspot ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.Tutorial Onlineku | Tutorial Blogspot | Tutorial Blogger | Tutorial Bagi Fomula
Share :
0 Comments
