BLOGBOY

DROP DOWN MENU FOR BLOGGER 4

HTML CODE:

<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

CSS CODE:

.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;
}

2. Sunrise Gloss Drop Down Menus

HTML CODE:

<div class="nav-container-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3Q4CKwNSOKr3ccVFEab6tb8j6qH14mXrZatE1O4T5GR8zDZqA-CtyanSLZe15xZ2XHbO0WF9AyBMnyJxVd8nt3iqTXGVtCbglYzmg1VDSORTVP3T-OW__wx5D2cFsk4mrxPnWhRQvsj-/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6kQ-LFBPGnTOLef39GeyzQy0y0qC4O8quUEcIJKoFJ6fyYWv6sQq7mq2FLQzNcYu3_dXbBwXOm1Wizpy9LIjvq9KvAtZTDgMXNO-dJU1bmbfMDCC4FIhfS7sOPQmAIwtA2IoSzp8ZCzw/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>

<li></li>
<li><a class="item-primary" href="#">Products</a>

<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>

</ul></li>

<li></li>
<li><a class="item-primary" href="#">Services</a>

<ul style="width:150px;">
<li>Title For Links</li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li></li>
<li>Title After Divider</li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>

<li></li>
<li><a class="item-primary" href="#;">Very Long Item</a>

<ul style="width:150px;">
<li>Title For Links</li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li></li>
<li>Title After Divider</li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>

</ul></li>
<li class="clear"> </li></ul>
</div>

CSS CODE:

@charset "utf-8";
/* CSS Document */

body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUSoS_uXOVh_3AdKOo-YX0UYCfdJqwptLrdK5lNAXlYHrZGW7bURVWg1TcDi3ZB6u9Zr-va88VwQIhNPW2YUV0z5lHVYkavyS3EeuwP01bdvEDu_B_BSaXOeor2IkuQwYAOj6rHlP9xgE/s1600/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6QMm4TtrhW5uTEHRLoal3_8eYDPwzqz4Rek4QTG06W4Pc_ocQVpwl5Lp_9kbr0pZX-mmuWGxGJtQEKHjQRN5xhJcKXN9xD9CjEChQc9NtdZzIKcPpx7WPulHLI_ThiaHOLO_ch_wpg8A/s1600/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6QMm4TtrhW5uTEHRLoal3_8eYDPwzqz4Rek4QTG06W4Pc_ocQVpwl5Lp_9kbr0pZX-mmuWGxGJtQEKHjQRN5xhJcKXN9xD9CjEChQc9NtdZzIKcPpx7WPulHLI_ThiaHOLO_ch_wpg8A/s1600/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisX9Tz8-l2FdfXglNaOGUIIT0JFmLA4UFE1uFp6-a2y5-X2otY2zLkvXcChNyXIt6vstKbLM5vcMrpkzqcQgRXoQD7Pky1yF3YrGyv_iy5kstnAah5rN9cQtHOQMxtMHDiGIbVCa5YjLvg/s1600/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUNQIuyLUEbK0gg-IKNtMqJCll-0Ju4nEaKLWVc92YQaqrVnBsbwlOClvo5G8Zcpl3h57zYvnRuGaE2ipHUmKYpyewbikr7JREFkNdyXvaE89YJvfIgjKyORnUgBT0HwI3atUeJOlPOim/s1600/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUNQIuyLUEbK0gg-IKNtMqJCll-0Ju4nEaKLWVc92YQaqrVnBsbwlOClvo5G8Zcpl3h57zYvnRuGaE2ipHUmKYpyewbikr7JREFkNdyXvaE89YJvfIgjKyORnUgBT0HwI3atUeJOlPOim/s1600/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYFEwOGVi05UR19sXMKvjaEq1f4osqNftBNmS5TlfBX3v5T7UhuCTlPPelNb5fM8vL-k320-F1qfTsW9dDw-ijJS1kx-vDVtNJcep3-oooANshN6K4fIK0YIYDWxT05x0HuI1QVrG1JBu/s1600/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

DROP DOWN MENU FOR BLOGGER 3

. Simple Black Drop Down Menus

HTML CODE: JAVA SCRIPT တြင္ COPY & PAST ရန္သာ................

<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 »</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 »</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>

</ul>
</li>
</ul>
</li>

<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>

</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>

</ul>
</li>
</ul>
</li>
</ul>

အနီေ၇ာင္ ေတြ က....မိမိရဲ့ labels အမည္။
# ေနရာတြင္..မိမိရဲ့......labels url ထည့္သြင္းရပါမည္

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

div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

DROP DOWN MENU FOR BLOGGER 2

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

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

ျပီးရင္ SAVE TEMPLATE ကို ႏွိပ္လိုက္ပါ

ေနာက္ထပ္....ေအာက္တြင္ေပးထားေသာ ကုတ္ေတြကို copy

java script တြင္ past ခ်လိုက္ပါ........ျပီးရင္ မိမိ ႏွစ္သက္ရာ ေနရာတြင္ ဆြဲထားႏိုင္ပါတယ္.........

HTML CODE:

မွတ္ခ်က္။ ။ အနီေရာင္ စလံုးေတြ ေန ရာမွာ မိမိရဲ့ labels လင့္ရဲ့ အမည္ကို ေရးပါ

# ေနရာ မွာ မိမိရဲ့..........url labels လင့္ကို အစားထုိးေပးပါ။

ကုတ္ေတြ ကို မိမိလိုသေလာက္ ထပ္ကူးႏိုင္ပါတယ္...............

DROP DOWN MENU FOR BLOGGER

- ]]></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 »</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 »</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 ကူးျပီး ျဖည့္ ႏိိုင္ ျဖတ္ႏိုင္ပါတယ္။

DROP DOWN MENU FOR BLOGGER 4

DROP DOWN MENU FOR BLOGGER 3

DROP DOWN MENU FOR BLOGGER 2

DROP DOWN MENU FOR BLOGGER

ျမန္မာစံေတာ္ခ်ိန္

တင္ျပီးသာ post ေတြ ၾကည့္ ရန္

လက္ရွိေရာက္ေနသူမ်ား

Followers