AUniqueStyleDropDownBarNavigationMenuသံုးခ်င္ရင္

 အခ်ိန္ရတုန္း၊AUniqueStyleDropDownBarNavigationMenuေလးတင္ေပးလိုက္ပါ။ဒီMenuကသံုးတဲ့သူေတြအရမ္းနည္းပါ
တယ္။
၁။ေအာက္ကကုဒ္ကိုရွာပါ။
]]></b:skin> ၂။ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။
.nav { height:35px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRV0wVs6PILhKi_R8Q-zDsLozoErcDJ8pyuovmLc1-ykm6vMU07TzLlrFh78VkudsSPn3DglPfnFCJw9E65VrRD5sI-fBO2vjpGwC9ycYljuf3mLxne7wPSF9MxofVsAsWu-uys4ZoQqV/s1600/bg.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0; } .nav .table { display:table; margin:0 auto; } .nav .select, .nav .current { margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap; } .nav li { margin:0; padding:0; height:auto; float:left; } .nav .select a { display:block; height:35px; float:left; font-weight:bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRV0wVs6PILhKi_R8Q-zDsLozoErcDJ8pyuovmLc1-ykm6vMU07TzLlrFh78VkudsSPn3DglPfnFCJw9E65VrRD5sI-fBO2vjpGwC9ycYljuf3mLxne7wPSF9MxofVsAsWu-uys4ZoQqV/s1600/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238; } .nav .select a:hover, .nav .select li:hover a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNU_ZFl3XH2uJkr3lVhgo0zgbgt1bNd8YmY4Kqqc581jceVhCIAFky2JbyghIa-89T6q8TzpwrUJXqNPzAnVUC_DWhL0P_ck3kEe3iaZAt1SJhggbwZk5PogYAqJJ_TKYzxlLmWQ2vDJ5/s1600/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238; } .nav .select a b{ font-weight:bold; } .nav .select a:hover b, .nav .select li:hover a b { display:block; float:left; padding:0 30px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNU_ZFl3XH2uJkr3lVhgo0zgbgt1bNd8YmY4Kqqc581jceVhCIAFky2JbyghIa-89T6q8TzpwrUJXqNPzAnVUC_DWhL0P_ck3kEe3iaZAt1SJhggbwZk5PogYAqJJ_TKYzxlLmWQ2vDJ5/s1600/hover.gif) right top; cursor:pointer; } .nav .select_sub { display:none; } /* IE6 only */ .nav table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .nav .sub { display:table; margin:0 auto; padding:0; list-style:none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background:transparent; color:#2b3238; } .nav .select :hover .select_sub, .nav .current .show { display:block; position:absolute; width:100%; top:35px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnR43F_GnxaCNDcKGvk4ENwJ5FpmDZh88YeiqUpzDZCUP1-yvEiad9zOF4hXvO6ksRSKuU_HfxIeRsuJipHGpzh-svCGlkxBvqajzrkSBduFfZkmg_m7NfA6OT0X3gub4HxLGcXsDLUM1r/s1600/back.gif); padding:0; z-index:100; left:0; text-align:center; } .nav .current .show { z-index:10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238; } .nav .current .sub li.sub_show a { color:#2b3238; cursor:default; } .nav .select .sub li a { font-weight:normal; } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility:visible; color:#73a0d2; } ၃။ေအာက္ကကုဒ္ကိုျပထားတဲ့ပံုအတိုင္းထည့္ေပးလို္က္ပါ။

<div class="nav"> <div class="table"> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a></li></ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li> </ul> </div> </li> </ul> </div> </div> က်ေနာ္အေပၚကကုဒ္မွာေရးထားသလိုလင့္ခ္ေတြကိုထည့္ျပီးရင္kp3နည္းပညာေနရာေတြမွာမိမိရဲ႕လင့္ခ္အမည္ကိုေရးေပးပါ။
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊


Credit : kp3(နည္းပညာ)