Blue Impression Drop Down Menu

ကြ်န္ေတာ္ဘော့ေလးကို လာေရာက္အားေပးတဲ့အတြက္ အထူးပဲ ေက်းဇူးတင္ရွိပါတယ္။

မွတ္ခ်က္။Menuပတ္သက္ျပီးသြားၾကည့္ရမယ္ေနရာKp3နည္းပညာ၊၄၁၅၊မွာရွိပါတယ္။

  အခုတင္တဲ့ Menu ကို ဒီမွာ သြားၾကည့္လိုက္ပါ။

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

view plainprint?

1. ]]></b:skin>   

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

view plainprint?

1. .bg {background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDWPubnLJ7jsiOBh_-27BALm-tSSFmnCdHV_mWIBosh7aRrXoqgIcTm9rGoZYnnoV3_aE4MdcYUR_PSSZHX3nftH6PwQSh7Vup2sovhQ6uKWmY9RBD0mkyADu9OATBj_Ukv0q7Lkc4CCP/s1600/button4.gif);}  
2.   
3. .menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJArdbLaZ_pd_UhZeO3Pt0yPImMdpa88VD9EzhAyCGFm3-2u2H0o9RvZomHZqdoRkU0FYrNqlFr3pb0x7BdBPDxzKL2Gb2aj0bwJWe8OTeWua31hFDwKftRh_j0go5ryF7jPnmGheL93Ld/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }  
4.   
5. .menu li.top {display:block; float:left; position:relative;}  
6.   
7. .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}  
8.   
9. .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}  
10.   
11. .menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0lQaTN4wivHVFsw8LNTp-ihUWxBarmUhm46v4n2eM3SHQOXLxxGIdU0qiafNpCyelthnDbuBDTa6AdjFT3iRRLtb1B0ek5Xl3dqHun-b6D4ObdzcXcvs-7Tu5IIlJdH-tbEiSYWZME8DB/s1600/down.gif) no-repeat right top;}  
12.   
13. .menu li a.top_link:hover {color:#000; background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDWPubnLJ7jsiOBh_-27BALm-tSSFmnCdHV_mWIBosh7aRrXoqgIcTm9rGoZYnnoV3_aE4MdcYUR_PSSZHX3nftH6PwQSh7Vup2sovhQ6uKWmY9RBD0mkyADu9OATBj_Ukv0q7Lkc4CCP/s1600/button4.gif) no-repeat;}  
14.   
15. .menu li a.top_link:hover span {background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDWPubnLJ7jsiOBh_-27BALm-tSSFmnCdHV_mWIBosh7aRrXoqgIcTm9rGoZYnnoV3_aE4MdcYUR_PSSZHX3nftH6PwQSh7Vup2sovhQ6uKWmY9RBD0mkyADu9OATBj_Ukv0q7Lkc4CCP/s1600/button4.gif) no-repeat right top;}  
16.   
17. .menu li a.top_link:hover span.down {background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6YGrKiAjqkqqJjXP-XqG8sEoecQ0XXiP3E3B8lJRAUEWaQdKzNQTruBa0Z8nAPX8iqpIVKmnZ-pexjn70U2MB88QDRxZKL-6VmhruQkyUA_W7O1gf_djHc_PVBWyH2v_gd9LQWuOhYxS/s1600/button4a.gif) no-repeat right top;}  
18.   
19.   
20.   
21. .menu li:hover > a.top_link {color:#000; background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDWPubnLJ7jsiOBh_-27BALm-tSSFmnCdHV_mWIBosh7aRrXoqgIcTm9rGoZYnnoV3_aE4MdcYUR_PSSZHX3nftH6PwQSh7Vup2sovhQ6uKWmY9RBD0mkyADu9OATBj_Ukv0q7Lkc4CCP/s1600/button4.gif) no-repeat;}  
22.   
23. .menu li:hover > a.top_link span {background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDWPubnLJ7jsiOBh_-27BALm-tSSFmnCdHV_mWIBosh7aRrXoqgIcTm9rGoZYnnoV3_aE4MdcYUR_PSSZHX3nftH6PwQSh7Vup2sovhQ6uKWmY9RBD0mkyADu9OATBj_Ukv0q7Lkc4CCP/s1600/button4.gif) no-repeat right top;}  
24.   
25. .menu li:hover > a.top_link span.down {background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6YGrKiAjqkqqJjXP-XqG8sEoecQ0XXiP3E3B8lJRAUEWaQdKzNQTruBa0Z8nAPX8iqpIVKmnZ-pexjn70U2MB88QDRxZKL-6VmhruQkyUA_W7O1gf_djHc_PVBWyH2v_gd9LQWuOhYxS/s1600/button4a.gif) no-repeat right top;}  
26.   
27.   
28.   
29. .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}  
30.   
31.   
32.   
33. .menu a:hover {visibility:visible;}  
34.   
35. .menu li:hover {position:relative; z-index:200;}  
36.   
37.   
38.   
39. .menu ul,  
40.   
41. .menu :hover ul ul,  
42.   
43. .menu :hover ul :hover ul ul,  
44.   
45. .menu :hover ul :hover ul :hover ul ul,  
46.   
47. .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}  
48.   
49.   
50.   
51. .menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}  
52.   
53. .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}  
54.   
55. .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}  
56.   
57. .menu :hover ul.sub li a.fly {background:#fff url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17p58Mq6Q-wWaJAWwcXdXiwx-jLeFkIVQArYo5bkZHvBKn_rHDWXJxcAp20Ir1_YZJozut2ywhApIJD9wUTviAI7XWx00NBfM7dqoS_9UX4VtQ2mMtMJCl7KwAVu5sExlVM6-LLm5kLnf/s1600/arrow.gif) 80px 7px no-repeat;}  
58.   
59. .menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}  
60.   
61. .menu :hover ul.sub li a.fly:hover {background:#95d2ee url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj465QA0Zj45Ck0MalSMA9hngN2j8QpKFo5-m7YbbNXapK0FzPXwaizgIRebI3WIwS3T_stCvg9KAEDr-fL1DgHf7B7jlvGuggTfsams2qgSJQm4jKPnee0VjMo4BzWRFja6EU29mSSQJGL/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}  
62.   
63. .menu :hover ul li:hover > a.fly {background:#95d2ee url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj465QA0Zj45Ck0MalSMA9hngN2j8QpKFo5-m7YbbNXapK0FzPXwaizgIRebI3WIwS3T_stCvg9KAEDr-fL1DgHf7B7jlvGuggTfsams2qgSJQm4jKPnee0VjMo4BzWRFja6EU29mSSQJGL/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}  
64.   
65.   
66.   
67. .menu :hover ul :hover ul,  
68.   
69. .menu :hover ul :hover ul :hover ul,  
70.   
71. .menu :hover ul :hover ul :hover ul :hover ul,  
72.   
73. .menu :hover ul :hover ul :hover ul :hover ul :hover ul  
74.   
75. {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}  

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

view plainprint?

1. <ul class="menu">  
2.   
3. <li class="top"><a href="http://kp3family.blogspot.com#" class="top_link"><span>KP3FAMILY</span></a></li>  
4.   
5. <li class="top"><a href="http://kp3family.blogspot.com#" class="top_link"><span>KP3FAMILYt</span></a>  
6.   
7. <ul class="sub">  
8.   
9. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
10.   
11. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
12.   
13. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
14.   
15. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
16.   
17. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
18.   
19. </ul>  
20.   
21. </li>  
22.   
23. <li class="top"><a href="http://kp3family.blogspot.com#" class="top_link"><span>KP3FAMILY</span></a>  
24.   
25. <ul class="sub">  
26.   
27. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
28.   
29. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
30.   
31. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
32.   
33. <li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>  
34.   
35. </ul>  
36.   
37. </li>  
38.   
39. <li class="top"><a href="http://kp3family.blogspot.com#" class="top_link"><span>KP3FAMILY</span></a></li>  
40.   
41. <li class="top"><a href="http://kp3family.blogspot.com#" class="top_link"><span>KP3FAMILY</span></a></li>  
42.   
43. </ul>  

မွတ္ခ်က္။။http://kp3family.blogspot.comေနရာနဲ႕KP3FAMILYေတြမွာမိမိရဲ႕လင့္ခ္နာမည္နဲ႕အစားထိုးေပးၾကပါ။