မုဒံုဝိုင္းေအာင္နည္းပညာ (AUniqueStyleDropDownBarNavigationMenuသံုးခ်င္ရင္)

၁။ေအာက္ကကုဒ္ကိုရွာပါ။

1. ]]></b:skin>  

၂။ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။

1. .nav {  
2. height:35px;  
3. background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bHqHuZvLPZ5J09oYKZyvZWLOpqWkEttQiz0Sg80mesyTWnT-BzJKTtzwR0bZV0XnqmUXiXeDHg3Wq3cYNMGHxCqYK7mBCwcv1Uabl9M5P5mFNDfF6qhqfteEfGjThcGoZllOLW_QTBI8/s1600/bg.gif) repeat-x;  
4. position:relative;  
5. font-family:arial, verdana, sans-serif;  
6. font-size:11px;  
7. width:100%;  
8. z-index:100;  
9. margin:0;  
10. padding:0;  
11. }  
12.   
13. .nav .table {  
14. display:table;  
15. margin:0 auto;  
16. }  
17.   
18. .nav .select,  
19. .nav .current {  
20. margin:0;  
21. padding:0;  
22. list-style:none;  
23. display:table-cell;  
24. white-space:nowrap;  
25. }  
26.   
27. .nav li {  
28. margin:0;  
29. padding:0;  
30. height:auto;  
31. float:left;  
32. }  
33.   
34. .nav .select a {  
35. display:block;  
36. height:35px;  
37. float:left;  
38. font-weight:bold;  
39. background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bHqHuZvLPZ5J09oYKZyvZWLOpqWkEttQiz0Sg80mesyTWnT-BzJKTtzwR0bZV0XnqmUXiXeDHg3Wq3cYNMGHxCqYK7mBCwcv1Uabl9M5P5mFNDfF6qhqfteEfGjThcGoZllOLW_QTBI8/s1600/bg.gif);  
40. padding:0 30px 0 30px;  
41. text-decoration:none;  
42. line-height:35px;  
43. white-space:nowrap;  
44. color:#2b3238;  
45. }  
46.   
47.   
48. .nav .select a:hover,  
49. .nav .select li:hover a {  
50. background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTlsx6w_zCZCqD10Owz1Ask9F6O2TvIUedsYJihyZ1wK2fCKI8wil6KxtObPUJAwYXRd90f2yRS2N45tSoegxMx4HLg6KtPUFfVlDVW6-aIVYLQjC5l7HaYTjXnT8jp2fGURptqbGPhJc/s1600/hover.gif);  
51. padding:0 0 0 15px;  
52. cursor:pointer;  
53. color:#2b3238;  
54. }  
55.   
56. .nav .select a b{  
57. font-weight:bold;  
58. }  
59.   
60. .nav .select a:hover b,  
61. .nav .select li:hover a b {  
62. display:block;  
63. float:left;  
64. padding:0 30px 0 15px;  
65. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTlsx6w_zCZCqD10Owz1Ask9F6O2TvIUedsYJihyZ1wK2fCKI8wil6KxtObPUJAwYXRd90f2yRS2N45tSoegxMx4HLg6KtPUFfVlDVW6-aIVYLQjC5l7HaYTjXnT8jp2fGURptqbGPhJc/s1600/hover.gif) right top;  
66. cursor:pointer;  
67. }  
68.   
69. .nav .select_sub {  
70. display:none;  
71. }  
72.   
73. /* IE6 only */  
74. .nav table {  
75. border-collapse:collapse;  
76. margin:-1px;  
77. font-size:1em;  
78. width:0;  
79. height:0;  
80. }  
81.   
82. .nav .sub {  
83. display:table;  
84. margin:0 auto;  
85. padding:0;  
86. list-style:none;  
87. }  
88.   
89. .nav .sub_active .current_sub a,  
90. .nav .sub_active a:hover {  
91. background:transparent;  
92. color:#2b3238;  
93. }  
94.   
95. .nav .select :hover .select_sub,  
96. .nav .current .show {  
97. display:block;  
98. position:absolute;  
99. width:100%;  
100. top:35px;  
101. background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4FOIBQ6hoLGMWridz_7OwzPTeiZClbPIrG-985oefQnlL3Stb2_YsB1-iMvinjkJNMdJUwo5K4p5uDqAYDzjtunw6QPBD5R_M4RpeUDZ6M7gB4W_A62L1zN26HBQ1MEbAOZk3bKWDrjL/s1600/back.gif);  
102. padding:0;  
103. z-index:100;  
104. left:0;  
105. text-align:center;  
106. }  
107.   
108. .nav .current .show {  
109. z-index:10;  
110. }  
111.   
112. .nav .select :hover .sub li a,  
113. .nav .current .show .sub li a {  
114. display:block;  
115. float:left;  
116. background:transparent;  
117. padding:0 10px 0 10px;  
118. margin:0;  
119. white-space:nowrap;  
120. border:0;  
121. color:#2b3238;  
122. }  
123.   
124. .nav .current .sub li.sub_show a {  
125. color:#2b3238;  
126. cursor:default;  
127. }  
128.   
129. .nav .select .sub li a {  
130. font-weight:normal;  
131. }  
132.   
133. .nav .select :hover .sub li a:hover,  
134. .nav .current .sub li a:hover {  
135. visibility:visible;  
136. color:#73a0d2;  
137. }  

၃။ေအာက္ကကုဒ္ကိုျပထားတဲ့ပံုအတိုင္းထည့္ေပးလို္က္ပါ။

1. <div class="nav">  
2. <div class="table">  
3.   
4. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a></li></ul>  
5.   
6. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a>  
7. <div class="select_sub">  
8. <ul class="sub">  
9. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
10. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
11. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
12.   
13. <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li>  
14. <li><a href="လင့္ခ္ထည့္ရန္#">kp3နည္းပညာ</a></li>  
15. </ul>  
16. </div>  
17. </li>  
18. </ul>  
19.   
20. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>kp3နည္းပညာ</b></a>  
21. <div class="select_sub">  
22. <ul class="sub">  
23.   
24. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
25. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
26. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
27. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
28. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
29. </ul>  
30.   
31. </div>  
32. </li>  
33. </ul>  
34.   
35.   
36. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a>  
37. <div class="select_sub">  
38. <ul class="sub">  
39. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
40. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
41. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
42.   
43. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
44. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
45. </ul>  
46. </div>  
47. </li>  
48. </ul>  
49.   
50.   
51. <ul class="select"><li><a href="လင့္ခ္ထည့္ရန္#"><b>မုဒံုဝိုင္းေအာင္နည္းပညာ</b></a>  
52. <div class="select_sub">  
53. <ul class="sub">  
54.   
55. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
56. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
57. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
58. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
59. <li><a href="လင့္ခ္ထည့္ရန္#">မုဒံုဝိုင္းေအာင္နည္းပညာ</a></li>  
60. </ul>  
61.   
62. </div>  
63. </li>  
64. </ul>  
65.   
66. </div>  
67. </div>  

က်ေနာ္အေပၚကကုဒ္မွာေရးထားသလိုလင့္ခ္ေတြကိုထည့္ျပီးရင္မုဒံုဝိုင္းေအာင္နည္းပညာေနရာေတြမွာမိမိရဲ႕လင့္ခ္အမည္ကိုေရးေပးပါ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊