Green Colour Css Dropdown-Menu

 မဂၤလာပါဗ်ာ..သည္တစ္ခါ နည္းပညာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ေခါင္းစဥ္ လွလွေလးေတြကို
ရွာေဖြမိသေလာက္ ျပန္လည္ တင္ျပ မွ်ေ၀တဲ့ နည္းေလးပါ.. Menu Style အလန္းေလးေတြေနာ္...

လုပ္နည္းေလးေတြနဲ႕ လိုအပ္တဲ့ ကုဒ္ေတြကို ေအာက္မွာ ဆက္ၾကည့္လိုက္ပါေနာ္..
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Expand  Widget  Template  ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> ကုဒ္ကို ရွာလိုက္ပါ..ေတြ႕တာနဲ႕ သူ႕အေပၚမွာဘဲ...ေအာက္ကေပးထားတဲ့ကုဒ္
                   ေတြကို ထည့္ေပးလုိက္ပါ..

/* The CSS Code for the menu starts here bloggertrix.com */ #bloggertrix_menu1{ height:32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ab1icXqbUbAEk1g0QdTRKvmb2uODqilap_TtvaJcEQDfobH81gUN6XuSe6LrFsTYqfp_8nDmErSGI7mghbsaPp_t-e1XHE_k7G3C6RIlawzgHdZdHcDH83rUeOH1WG2lAnUTkUoWCNA/s1600/bloggertrix.com_menubg.png); display:block;padding:0px 0 0px 0px; font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif; font-weight:normal;text-transform:uppercase;overflow:hidden; width:960px; } #bloggertrix_menu{ margin: 0px;padding: 0px 1px;width:998px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ab1icXqbUbAEk1g0QdTRKvmb2uODqilap_TtvaJcEQDfobH81gUN6XuSe6LrFsTYqfp_8nDmErSGI7mghbsaPp_t-e1XHE_k7G3C6RIlawzgHdZdHcDH83rUeOH1WG2lAnUTkUoWCNA/s1600/bloggertrix.com_menubg.png) ; height:32px; } #bloggertrix_menu ul { float: left;list-style: none;margin: 0px; padding: 0px; } #bloggertrix_menu li { float: left; list-style: none; margin: 0px; padding: 0px; } #bloggertrix_menu li a, #bloggertrix_menu li a:link, #bloggertrix_menu li a:visited { color: #bfe195; display: block; margin: 0px; padding: 10px 10px 10px 10px; } #bloggertrix_menu li a:hover, #bloggertrix_menu li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ab1icXqbUbAEk1g0QdTRKvmb2uODqilap_TtvaJcEQDfobH81gUN6XuSe6LrFsTYqfp_8nDmErSGI7mghbsaPp_t-e1XHE_k7G3C6RIlawzgHdZdHcDH83rUeOH1WG2lAnUTkUoWCNA/s1600/bloggertrix.com_menubg.png) repeat-x ; color: #fff; margin: 0px; padding: 10px 10px 10px 10px; text-decoration: none; } #bloggertrix_menu li li a, #bloggertrix_menu li li a:link, #bloggertrix_menu li li a:visited { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ab1icXqbUbAEk1g0QdTRKvmb2uODqilap_TtvaJcEQDfobH81gUN6XuSe6LrFsTYqfp_8nDmErSGI7mghbsaPp_t-e1XHE_k7G3C6RIlawzgHdZdHcDH83rUeOH1WG2lAnUTkUoWCNA/s1600/bloggertrix.com_menubg.png) ; width: 150px; color: #bfe195; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal;float: none;margin: 0px;padding: 9px 10px 9px 10px; border-bottom: 1px solid #5E9F09; } #bloggertrix_menu li li a:hover, #bloggertrix_menu li li a:active { background:#3f6d06; color: #fff; padding: 9px 10px 9px 10px; } #bloggertrix_menu li ul { z-index: 9999; position: absolute; left: -999em;height: auto;width: 170px;margin: 0px; padding: 0px; } #bloggertrix_menu li li { } #bloggertrix_menu li ul a { width: 140px; } #bloggertrix_menu li ul a:hover, #bloggertrix_menu li ul a:active { } #bloggertrix_menu li ul ul { margin: -31px 0 0 170px; } #bloggertrix_menu li:hover ul ul, #bloggertrix_menu li:hover ul ul ul, #bloggertrix_menu li.sfhover ul ul, #bloggertrix_menu li.sfhover ul ul ul { left: -999em; } #bloggertrix_menu li:hover ul, #bloggertrix_menu li li:hover ul, #bloggertrix_menu li li li:hover ul, #bloggertrix_menu li.sfhover ul, #bloggertrix_menu li li.sfhover ul, #bloggertrix_menu li li li.sfhover ul { left: auto; } #bloggertrix_menu li:hover, #bloggertrix_menu li.sfhover { position: static; }

ေနာက္  မိမိတို႕ template  ကို  save လိုူက္ပါ ။

ေနာက္ထပ္ဆက္လက္ျပီး ၾကည့္လုိက္ပါေနာ္...

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<div id="bloggertrix_menu1"><div id="bloggertrix_menu"><ul><li><a href="#">Home</a></li><li><a href="#">Business</a><ul class="children"><li><a href="#">Internet</a></li><li><a href="#">Market</a></li><li><a href="#">Stock</a></li></ul></li><li><a href="http://www.bloggertrix.com/">Downloads</a><ul class="children"><li><a href="#">Dvd</a></li><li><a href="#">Games</a></li><li><a href="#">Software</a><ul class="children"><li><a href="#">Office</a></li></ul></li></ul></li><li><a href="http://www.bloggertrix.com/">Parent Category</a><ul class="children"><li><a href="http://www.bloggertrix.com/">Child Category 1</a><ul class="children"><li><a href="#">Sub Child Category 1</a></li><li><a href="#">Sub Child Category 2</a></li><li><a href="#">Sub Child Category 3</a></li></ul></li><li><a href="#">Child Category 2</a></li><li><a href="#">Child Category 3</a></li><li><a href="#">Child Category 4</a></li></ul></li><li><a href="#">Featured</a></li><li><a href="#">Health</a><ul class="children"><li><a href="#">Childcare</a></li><li><a href="#">Doctors</a></li></ul></li><li><a href="http://www.bloggertrix.com/">Uncategorized</a></li></ul></div></div>

ေပးထားတဲ့ ေခါင္းစဥ္ေတြကို မိမိတို႕ လိုအပ္တဲ့ ေခါင္းစဥ္စာသားေတြအတိုင္း ျပင္ေပးလိုက္ေပါ့..
မိမိတို႕အေနနဲ႕ တင္ထားေသာ ပို႕စ္မ်ားနဲ႕ ေခါင္းစဥ္ကို လင့္ခ်ိတ္ေပးရမွာ ျဖစ္ပါတယ္..
လင့္ခ်ိတ္နည္းကို  တင္ထားျပီးပါျပီ...

လင့္ခ်ိတ္နည္း  (၁) သည္မွာ ကလစ္  ၾကည့္လိုက္ပါ။
လင့္ခ်ိတ္နည္း  (၂)  သည္မွာကလစ္  ၾက္ည့နိဳင္ပါတယ္။

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..
<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
လယ္တီေျမသား www.ledimyethar.com
ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/
မွတ္စုစာအုပ္ http://aungsan96.blogspot.com/
ဓမၼႏွင့္စာေပနန္းေတာ္ http://ninilayy.blogspot.com/