----- UPDATED -----

Promenu (với hiệu ứng sổ dọc)

 ở bản update này, mình sẽ cập nhật thêm tính năng thêm submenu cho menu chính. Tính năng này mình kết hợp từ bài viết "Tạo menu nằm ngang với hiệu ứng sổ dọc".
- Để thực hiện việc cập nhật này, các bạn phải xem lại bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống

Xem DEMO

Hình ảnh minh họa :

- Sau đây là code mẫu của thủ thuật đã updated, các bạn thực hiện theo hướng dẫn của bài này và bài Tạo Menu Thanh menu ngang có sổ dọc xuống để có thể chỉnh sửa lại từ code mẫu :

<script src="http://fandung.googlecode.com/svn/trunk/js/dropdown2.js" type="text/javascript"></script>

<style type="text/css">
#promenu ul li a:hover {text-decoration:none;}
#promenu {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJhldAcORKhCNTc-SPL3Rf6cVGz-1vgt4GMD3fEUvRB1AskL0tyk95hmzm2JZ2NajRz3yoZuhP3Qeak18AzZL6g_kWkOnKw7Zhso5rbr68Hr8-7Wtyf-X799QCEFdeF7uoIt2oZguPQRO/s400/1-6-bg.png);
width: 100%;
height: 32px;
}
.menu {
list-style: none;
width: 100%;
margin: auto!important;
}
.menu li {
float: left;
text-align: center;
padding:0!important;
}
.menu li a {
color: white;
height:30px;
display:block;
}
.menu .active, .menu li:hover {
background-position: 0 -34px;
float: left;
}

.menu .active span, .menu span:hover {
background-position: 100% -34px;
float: left;
line-height: 30px;
height: 30px;
}

.menu li a span {
font: 12px/31px Tahoma;
font-weight: 700;
display: block;
text-align: center;
padding: 0 8px 0 9px;
}
.menusep {
background-position: 0 0;
height: 32px;
line-height: 32px;
width: 2px;
}
.promenu_sub {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_kF3Fu-gzg0B5KttZfqjLmWA0rSOlAuB-ofi0O05y6d7Kb40hP2Blu1p0ZTKVG1mUuZ-P1P8WPv2UENlKcv4uxSCSuR6nbmRmie7OfSbkLljKxgXpzZqHosNv_d00qNkSWu-cOatc85hS/s240/1-6-bg_sub2.png);
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 7px 12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
cursor:pointer;
border-top:1px solid #ededed;
}
</style>

<script type="text/javascript">
//<![CDATA[
var style1=["0px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ez9n9BzbCdVim26ji4r_DBsBusaVpLiswFBurZ505MttSTGa616PQAJGm33Mnmlf65tJtVD8MJGLP_X3tecpjyZ_Loe74gqca7PmKxOCTZHBYk8DFoPicdBRQZVw5kRH7-MZ7Urgl3nl/s318/style1-sp.png"];

var style2=["-40px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5dthjdQ5UTUrbk6RhENHMmJt-ePtKzqBRjr2SoTMih6sXBssmoJqM-aRXbaspyCkH6zUJgr9coIeBMN1jHQuWlCOlaKX9hTQCtQGG7ipL7cZG4s9NrjubvXOBfDcO8kcjfQsiYCKjzVay/s318/style2-sp.png"];

var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQo3vtNemNIrrRoPhpiHA0sX9PASCcc7pOROfym14ptGz4YCgJut_I5Q84GXzl7SIef5kx_B8mWj8XxqKzg27b5oOB29rJeJeV_niLlYlyk02vPxrDkXwzGfLLN0zCQiJs7DMb3ND4b9sz/s318/style3-sp.png"];

var style4=["-120px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKixbiHc6xC6EMTAss_Rix2Vu-2rd8VmUZGvZBixajTkeTuUXhwvKqzwrDMaxROLO6-fHCZ4ufTFMX4DdI6RNHfHbYRSqVs0XKek8YWtY-ifOsqT4NR536a8C6USE9g_9I07rV-f8GUsFb/s318/style4-sp.png"];

var style5=["-160px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaJPjOxfndKYCp4eeSlOaQo3xw9Gv368BAjFVBWgbyU87Dvq9lrrrJNBi1luoRgdEInoCTK8-i3FdyiqZmWwDXkQ7oOixhaPSWepfN9-n0pmrTjZsF2NRPYbvMHHp5KFgqOwUcNj5iX4sa/s318/style5-sp.png"];

var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXg6II-reEMvi4DM4_6Y8jseWvkni4GZ9Mu8sTmriWR3YmvjMxfofeV3Excpw-RZSeOnTtLGHYKlNVXdR0hLe2BC13RDUrU2AHv8RBmiwWF5Mds_yzVfpA7dwHXLX2d3Tq7-vaRTlfeJHn/s318/style6-sp.png"];

var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["/search/label/Label1","Label1","id1"];
var m2=["/search/label/Label2","Label2","id2"];
var m3=["/search/label/Label3","Label3","id3"];
var m4=["/search/label/Label4","Label4","id4"];
var m5=["/search/label/Label5","Label5","id5"];
var m6=["/search/label/Label6","Label6","id6"];
var m7=["/search/label/Label7","Label7","id7"];
var m8=["/search/label/Label8","Label8","id8"];
var m9=["/search/label/Label9","Label9","id9"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6,m7,m8,m9];
var n=ttmenu.length;
var list_menu=[];
var list_active=[];
var c_menu='';
var m_homepage='http://demo.fandung.com/';
var h_cond=m_homepage+'search';

var active_cond = location.href;
var home_cond=active_cond.split("?")[0];

var bg_pos='';
var sp_img='';

if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else {bg_pos=style1[0];sp_img=style1[1];}

var mcss = document.createElement('style');
mcss.type = 'text/css';
mcss.innerHTML = '#promenu, .promenu_sub {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';
document.body.appendChild(mcss);

// submenu
function otab(){document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}

function submn(submn_link,submn_text){ document.write('<tr><td onmouseover="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJhldAcORKhCNTc-SPL3Rf6cVGz-1vgt4GMD3fEUvRB1AskL0tyk95hmzm2JZ2NajRz3yoZuhP3Qeak18AzZL6g_kWkOnKw7Zhso5rbr68Hr8-7Wtyf-X799QCEFdeF7uoIt2oZguPQRO/s400/1-6-bg.png) repeat-x 0 '+bg_pos+'\'" onmouseout="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_kF3Fu-gzg0B5KttZfqjLmWA0rSOlAuB-ofi0O05y6d7Kb40hP2Blu1p0ZTKVG1mUuZ-P1P8WPv2UENlKcv4uxSCSuR6nbmRmie7OfSbkLljKxgXpzZqHosNv_d00qNkSWu-cOatc85hS/s240/1-6-bg_sub2.png) repeat-x 0 '+bg_pos+'\'" class="promenu_sub" onclick="window.location.href=\''+submn_link+'\'">'+submn_text+'</td></tr>');}

function ctab(){document.write('<\/table>');}

function otab(child_id){document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}

//submenu

c_menu +='<div id="promenu"><ul class="menu">';

for (var i=0;i<n;i++) {

if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}

list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';
c_menu +=list_menu[i];
if (i<n-1) {c_menu +='<li class="menusep"> </li>';}
}
c_menu +='</ul></div>';
document.write(c_menu);

//]]>
</script>

<script type="text/javascript">
otab("id1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("id1", "id1_child", "hover", "y", "pointer");

otab("id2_child");
submn('link_submenu2.1','Submenu 2.1');
ctab();
at_attach("id2", "id2_child", "hover", "y", "pointer");

otab("id3_child");
submn('link_submenu3.1','Submenu 3.1');
ctab();
at_attach("id3", "id3_child", "hover", "y", "pointer");

otab("id4_child");
submn('link_submenu4.1','Submenu 4.1');
submn('link_submenu4.2','Submenu 4.2');
submn('link_submenu4.3','Submenu 4.3');
submn('link_submenu4.4','Submenu 4.4');
submn('link_submenu4.5','Submenu 4.5');
submn('link_submenu4.6','Submenu 4.6');
ctab();
at_attach("id4", "id4_child", "hover", "y", "pointer");

otab("id5_child");
submn('link_submenu5.1','Submenu 5.1');
submn('link_submenu5.2','Submenu 5.2');
ctab();
at_attach("id5", "id5_child", "hover", "y", "pointer");

otab("id6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("id6", "id6_child", "hover", "y", "pointer");

otab("id7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("id7", "id7_child", "hover", "y", "pointer");

otab("id8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
submn('link_submenu8.3','Submenu 8.3');
submn('link_submenu8.4','Submenu 8.4');
submn('link_submenu8.5','Submenu 8.5');
submn('link_submenu8.6','Submenu 8.6');
submn('link_submenu8.7','Submenu 8.7');
ctab();
at_attach("id8", "id8_child", "hover", "y", "pointer");
</script>

- bản updated vẫn chưa hoàn thiện ở phần hiện hiệu ứng thay đổi style cho menu ở các trang submenu, mình sẽ fix sớm khi có thể.