DROP DOWN MENU FOR BLOGGER

 Design -> Edit HTML ျပီးရင္ ပံုေလးထဲကအတိုင္း    "Expand Widget Templates" ကိုအမွန္ခ်စ္ေပးလိုက္ပါ....
ျပီတာနဲ့............ctrl >>F ကို ႏွိပ္ျပီး...............

-   ]]></b:skin>  ကုတ္ကို ႐ွာပါ  .....
ျပီးရင္  
-   ]]></b:skin> အေပၚမွာ past ခ် လိုက္ပါ.................


.menu{
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;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8X5gPGCp3X0z1qS6dhWHq_TS2PqGXKscCQSHwDbwab_5Ay3G3JDW6BUr8r-EhcovDANC3Oo75T9uCcMcEf-FA6oI2hbtlzA-X6dJwNYOuG5SJNmC1iEMTZbhyLuRLJkJ1OXcNSfrhA2gM/s1600/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;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcr05IBXdry-9juobKVdZzrgYBa-3TjEd_AbLdiyiQG7Py98Y5C0mEZM6Ksfb5GaHXWzZD7bYm4fSeXrHBg9teBJTYZ91n96Jb5Xr7O93ou4gj9uI7VHlaxDBwBHQh23U3j_hMxPqnZNd/s1600/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu 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;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcZPvh2xjhGfoO2-LrchouxeTKQdlor7VgeFTihjeblD8TvpVgkINEIufgOylANgk98fwoG5KqKD3agC6tXGkH8_6GtFR_s7HxPsw5eq-plr2R8d1LQv4O-oKZ_Xc5nxWj2I0vIipcBHqi/s1600/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGC_VS1w-XVrbzDYMfeia4qRwpxo6AnuQtpc3kJa_TKpNSV6Qerc2s8y5rU4uefjF6zX9pkznkveONq_XlRJijBvFes3yx1zS6fSkCb8kmegVx0CM1oa7kUuykKfh56zLLbe_dmRAZoahm/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

  Save Template    ကို ႏွိပ္ လိုက္ပါ
ေနာက္ထပ္ တစ္ဆင့္အေန နဲ့.....ေအာက္က ကုတ္ေတြကို. copy ကူးျပီး
java script ထဲမွာ PAST ျပီး မိမိ လိုခ်င္ေသာ ေနရာတြင္ ဆြဲထားလိုက္ပါ။။။။။။။။။။။

  Simple Green Drop Down Menus 

အစိမ္ေရာင္ drop down menu ေလး၇ဲ့  HTML ကုတ္ေတြပါ

<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
</ul>
</li>
</ul>

မွတ္ခ်က္..............# ေနရာမွာ မိမိ ရဲ့ labels လင့္ေတြကို အစားထိုးေပးရပါမယ္....
အနီေရာင္ စလံုးေတြ  ေနရာမွာ    မိမိ  labels လင့္ေတြရဲ့ ေခါင္စဥ္ အမည္ေပါ့.......
အ၀ါေရာင္နဲ့  ကြက္ျပထားတဲ့   ကုတ္ေတြကို မိမိိ လိုသလာက္  copy ကူးျပီး  ျဖည့္ ႏိိုင္  ျဖတ္ႏိုင္ပါတယ္။  

Delicious

Digg

StumbleUpon

Reddit

Subscribe to RSS Feed