Membina header drop down menu

Untuk membina header drop down menu seperti contoh yang di tunjukkan di atas, copy css script dan html script di bawah dan editkan terlebih dahulu dalam notepad. Edit kod warna pada css script yang bertanda background:# dan colour:# dengan melayari http://html-color-codes.com/ dan masukkan link anda pada perkataan link dan tukarkan perkataan tajuk kepada tajuk anda pada html script di bawah. Jangan ubah apa-apa kod atau tag selain daripada apa yang Mari bina blog nyatakan di atas.

Untuk memasukkan script css yang telah anda edit, klik layout dan klik edit html. Kemudian, tick kan pada Expand widget template. Seterusnya tekan Ctrl+F dan taip perkataan </b:skin> atau </style> dan tekan enter. Pastekan css script yang telah di edit itu sebelum atau di atas kod </style> . Setelah di pastekan script css tersebut klik preview dan jika tiada sebarang masalah ataupun error timbul, kembali semula pada edit html tadi dan taipkan pada ruangan find (ctrl+f) perkataan </head> dan pastekan html script yang telah di edit sebelum atau di atas perkataan </head> tersebut.Seterusnya klik preview,dan jika tiada berlaku sebarang masalah ataupun error, klik save dan anda boleh melihat hasilnya.

Jika terdapat sebarang masalah pada script tersebut, sila maklumkan kepada Nescafeais pada ruangan komen posting ini.

p/s: Jika anda tidak mahir memahami script css dan script html, Mari bina blog manasihatkan anda supaya tidak membina header drop down menu ini kerana dikhuatiri anda script template akan menghadapi masalah(error), tetapi jika anda menginginkan juga untuk membinanya, Mari bina blog sedia membantu anda..

Css script

/* Category menu*/ #catmenucontainer{ height:29px; background:#0099FF; display:block; padding:0px 0px 0px 0px; font: 11px Arial, sans-serif; font-weight:bold; text-transform:uppercase; border-top:1px solid #0099FF; } #catmenu ,#catmenu ul { margin: 0px 0px 0px 0px; padding: 0px; list-style: none; height:39px; }#catmenu a { color: #ffffff; display: block; font-weight: bold; padding: 7px 10px 7px 10px; } #catmenu a:hover { background:#ffffff; color: #0099FF; display: block; text-decoration: none; }#catmenu li { float: left; margin: 0px; padding: 0px; } #catmenu li li { float: left; margin: 0px 0px 0px 0px; padding: 0px; width: 130px; } #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited { background:#CCCCCC ; width: 160px; float: none; margin: 0px; padding: 5px 10px 5px 10px; color:#ffffff; } #catmenu li li a:hover, #catmenu li li a:active { background:#ffffff ; width: 160px; float: none; margin: 0px; padding: 5px 10px 5px 10px; color:#0099FF; }#catmenu li ul { position: absolute; width: 10em; left: -999em; z-index:200; }#catmenu li:hover ul { left: auto; display: block; } #catmenu li:hover ul, #catmenu li.sfhover ul { left: auto; }

HTML script

<div id="'catmenucontainer'"><div id="'catmenu'"><ul><li><a href="'link'">Home</a></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /><li><a>Tajuk</a><ul class="'children'"><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /><li><a href="'link'" title="''">Tajuk link </a></li><br /></ul></li><br /></ul></div></div>