​អ្នក​ប្រាកដជា​ដឹង​ហើយ​ថា Menu គឺជា​ការប្រមូលផ្តុំ​នៃ Lists ដែល​គេ​ប្រើ​សម្រាប់ Link ភ្ជាប់​កាន់​ទំព័រ​ផ្សេង​ទៀត​របស់​វ៉ិបសាយ​។ ហើយ Menu ក៏​ជា​ផ្នែក​មួយ ដែល​អាច​ជួយ​ធ្វើឲ្យ​វ៉ិបសាយ​កាន់តែ​មាន​ភា​ព​ទាក់ទាញ ដូច្នេះ​ហើយ​អ្នក​គួរតែ​ចេះ​កែឆ្នៃ Menu ឲ្យ​សាកសម​ជាមួយ​និង​វ៉ិបសាយ​របស់​អ្នក ទាំង​ពណ៌ និង​ទាំង​រូបរាង​ទើប​ទទួលបាន​នូវ​ភាពស្រស់ស្អាត​។​
​ជំ​ហ៊ាន​ទី ១ HTML
​ជំ​ហ៊ាន​ដំបូង​អ្នក​ត្រូវបង្កើត Unordered List មួយ​ដែល​សរសេរ​នៅក្នុង File HTML ព្រមទាំង​បង្កើត Sub menu ផងដែរ​។
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS2_zpsb1dee4d1.jpg
​នេះ​ជា​លទ្ធផល នៃ​ជំ​ហ៊ាន​ដំបូង​ដែល​អ្នកសរសេរ​នៅក្នុង File HTML
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS3_zpsba747e12.jpg
​ជំ​ហ៊ាន​ទី ២ Menu Layout
​ចំណុច​ទី​ពីរ​នេះ​អ្នក​ត្រូវ​សរសេរ​នៅក្នុង File Style (css) ហើយ​ការសរសេរ​នេះ​អ្នក​ត្រូវ​ធ្វើការ Clear margin, padding និង border របស់ menu ឲ្យ​ស្មើ 0 ទាំងអស់​។ បន្ទាប់មក​ត្រូវ កំណត់​ប្រវែង និង កំពស់​អោយ menu រួម​ទាំង​ធ្វើឲ្យ​ជ្រុង​របស់ menu កោង​ដោយ​ប្រើប្រាស់ gradients ។​� ដើម្បី​ធ្វើការ​តម្រឹម អ្នក​ត្រូវ​ប្រើ float សម្រាប់​ទាញ Lists ឲ្យ​ឡើង​ស្មើគ្នា មិនតែប៉ុណ្ណោះ អ្នក​ចាំបាច់​ត្រូវ​ប្រើ Position ដើម្បី​បញ្ជារ​លើ sub menus ចេញមក​។​
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS4_zps892f73ed.jpg
​នេះ​ជា​លទ្ធផល​នៃ​ជំ​ហ៊ាន​ទី ២ តែ​មើលទៅ​ដូចជា​មិន​ទាន់​ស្អាត ដូច​អ្វើដែល​ចង់បាន​នៅ​ឡើយ​
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS5_zps559dbe39.jpg
​ជំ​ហ៊ាន​ទី ៣ Menu Links
​ចំណុច​នេះ​អ្នក​ត្រូវ​កំណត់ Properties ទៅលើ menu links ដូចជា font, color, padding .​ល​.​។ បន្ទាប់​មក​អ្នក​ត្រូវ បន្ថែម​ស្រមោល​របស់​អក្សរ ដើម្បី​មាន​ភាពស្រស់ស្អាត​នៅ​ព​លេ​ដែល​អ្នក​យក Mouse Over ពីលើ​។​
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS6_zps71dbe425.jpg
​នេះ​ជា​លទ្ធផល​បន្ទាប់ពី​អ្នក​បាន​កំណត់ style ពី​ខាងលើ​មក​
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS7_zpscab80028.jpg
​ជំ​ហ៊ាន​ទី ៤ Sub Menu
​នៅ​ជំ​ហ៊ាន​ចុងក្រោយ​នេះ​អ្នក​ត្រូវ​សរសេរ​កំណត់​ទៅ​លើ sub menu ឲ្យ​បង្ហាញ​ចេញ​មក នៅពេល​ដែល​អ្នក​យក mouse over ពីលើ mMenu ។ ពេល​នេះ​សូម​ធ្វើ​ការកំណត់ Style ឲ្យ sub menu ដូចខាងក្រោម​៖
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS9_zps81c5c150.jpg
​ខាងក្រោម​នេះ​គឺជា​លទ្ធផល​ចុងក្រោយ​ដែល​ទទួលបាន
https://i1272.photobucket.com/albums/y389/domneng/Decore/CSS8_zps363440e4.jpg
នៅមានវគ្គបន្ត​ ។​
ចុចទីនេះ​ដើម្បីមើលទំព័រដើម ដែលបានសហការ​ជាមួយនឹងដំណឹង ៖www.homeofhelp.com