Menu xổ xuống có menu con 2

Menu dọc này cũng xổ dọc xuống các menu con khi bạn bấm chuột vào menu chính nhưng đặc biệt hơn ở chỗ là khi bạn đang xem menu nào thì menu đó sẽ có màu khác (màu đỏ) tất cả menu còn lại sẽ có màu đen...

Bạn có thể xem DEMO.

Ảnh minh họa

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menudoc-menucon/ddaccordion.js">
</script>
<script type="text/javascript"> ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})
</script> <style type="text/css">
.arrowlistmenu{
width: 220px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSvAEbcwIW7dsOe4v9TrvUYXVG7e_6zVNhadiK_zPiHgfLaWEDa5NDIvtwVFXpHlXVIvDbja83bxT7-dsTHBthhbQMLXiOCnhjSlN8Y4CHEtrzO_iT5FQcbhMmQ0dmEBiijdRHx9hNUqo/s1600/titlebar.png) repeat-x center left;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwB40zGRTO2HowlO8a67dRdPNf2bhYnhgdnexhI0ZfWtJ-pHMz52_SFSN4ajJtWQzm794UhvvK9DZEqT_-m5Z7CrqC-YeQrXAueOhOO4Xrpzboc9_5QovbnpojPTb5QSm6e9vMvSc38gcB/s1600/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNUO6J1n_aD14xsPR_x0UUJvyyxYghcwvAqFX9MGrWqZ-3LdLkSWLdKXhNOivVaX9oKPWJtMBhUmBqwUV4nDdzm3hecyguhyphenhyphen4kY71MwU8IuZrdbocuh7CKfx9d-ABob-rwYu1K0vhmXnj/s1600/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>
<div class="arrowlistmenu">
<h3 class="menuheader expandable">☆Tên menu chính 1</h3>
<ul class="categoryitems">
           <li><a href="#">Tên menu con 1</a></li>
           <li><a href="#">Tên menu con 2</a></li>
           <li><a href="#">Tên menu con 3</a></li>
           <li><a href="#">Tên menu con 4</a></li>
           <li><a href="#">Tên menu con 5</a></li>
           <li><a href="#">Tên menu con 6</a></li>
           <li><a href="#">Tên menu con 7</a></li>
</ul>

<h3 class="menuheader expandable">☆Tên meun chính 2</h3>
<ul class="categoryitems">
        <li><a href="#">Tên menu con 1</a></li>
        <li><a href="#">Tên menu con 2</a></li>
        <li><a href="#">Tên menu con 3</a></li>
        <li><a href="#">Tên menu con 4</a></li>
        <li><a href="#">Tên menu con 5</a></li>
        <li><a href="#">Tên menu con 6</a></li>
        <li><a href="#">Tên menu con 7</a></li>
</ul>

<h3 class="menuheader expandable">☆Tên menu chính 3</h3>
<ul class="categoryitems">
         <li><a href="#">Tên menu con 1</a></li>
         <li><a href="#">Tên menu con 2</a></li>
         <li><a href="#">Tên menu con 3</a></li>
</ul>

<h3 class="menuheader expandable">☆Tên menu chính 4</h3>
<ul class="categoryitems">
         <li><a href="#">Tên menu con 1</a></li>
         <li><a href="#">Tên menu con 2</a></li>
         <li><a href="#">Tên menu con 3</a></li>
</ul>
</div>

Bạn thay đổi Tên menu chính và menu con theo ý mình và thay dấu (#) thành địa chỉ link mình cần  liên kết, thay Link icon màu hồng thành icon mình thích (hoặc để mặc định), sau đó bấm Lưu lại là xong.
Các bạn có thể xem Các Icon tại đây.

Mở rộng thêm:

- Nếu muốn thêm menu phụ thì bạn copy đoạn code này:

<li><a href="#">Tên menu con </a></li>

Dán tiếp trên dòng lệnh </ul> của mỗi menu chính mà mình muốn thêm.

- Còn muốn thêm một menu chính thì bạn copy đoạn code này:

<h3 class="menuheader expandable">☆Tên menu chính </h3>
<ul class="categoryitems">
     <li><a href="#">Tên menu con 1</a></li>
     <li><a href="#">Tên menu con 2</a></li>
     <li><a href="#">Tên menu con 3</a></li>
     <li><a href="#">Tên menu con 4</a></li>
</ul>

Dán trên thẻ </div> cuối cùng.

Chúc các bạn thành công!!!