Tạo menu ngang ẩn hiện, có menu con xổ xuống 2 cấp cho blogspot

Khi mới vào blog hoặc lên đầu trang blog thì không thấy menu vì menu đang ẩn (ảnh trên).
Khi cuộn blog (hoặc chạy blog) xuống 150px thì menu ngang cố định xuất hiện - menu ngang màu xanh chữ đỏ - "Văn tổng hợp" và "Thơ tổng hợp" là menu 2 cấp (ảnh dưới).

Các bạn xem trước và chạy thử Tại đây
Cách thực hiện như sau:


Chú ý: Trước khi thực hiện chỉnh sửa HTML, nên sao lưu HTML của Mẫu (chủ đề), nếu chỉnh sửa không thành công có thể phục hồi lại HTML của Mẫu (chủ đề) như cũ.
Cách sao lưu và phục hồi HTML của blogspot Xem Tại Đây

1. Đăng nhập blog - mẫu (chủ đề) - chỉnh sửa HTML.
2. Copy và dán đoạn code dưới đây (chữ xanh) trước thẻ ]]></b:skin>

/*----- Drop Down Menu ----*/

#drnavbar {
  width: 900px; /*100% là rộng toàn màn hình*/;
  height: 35px;
  background-color: #FBEFFB; /*có thể thay đổi mã màu*/
  display: none;
  box-shadow: 0px 0px 0px rgba(0,0,0,0); /*Đổ bóng cho menu*/
  position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
  top: 0; /*Nằm trên cùng*/
  left: auto; /*0 là nằm sát bên trái*/
  z-index: 100000; /*Hiển thị lớp trên cùng*/
}
#drnav { 
    margin: 0; 
    padding: 0; 
} 
#drnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#drnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #FFF; 
        border-right:1px solid #FFF; 
        height:35px; 
} 
#drnav li a, #drnav li a:link, #drnav li a:visited { 
    color: #DF013A; 
    display: block; 
    font:bold 14px Dancing Script, cursive, serif; margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
        
} 
#drnav li a:hover, #drnav li a:active { 
    background: #BF0100; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px; 
}
#drnav li { 
    float: left; 
    padding: 0; 
} 
#drnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#drnav li ul a { 
    width: 140px; 
} 
#drnav li ul ul { 
    margin: -25px 0 0 161px; 
} 
#drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { 
    left: auto; 
} 
#drnav li:hover, #drnav li.sfhover { 
    position: static; 
}
#drnav li li a, #drnav li li a:link, #drnav li li a:visited { 
    background: #BF0100; 
    width: 120px; 
    color: #FFF; 
    display: block; 
    font:normal 12px Dancing Script, cursive, serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border-bottom:0px dotted #333;
    
} 
#drnav li li a:hover, #drnavli li a:active { 
    background: #060505; 
    color: #FFF; 
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

3. Copy và dán đoạn code dưới đây (chữ nâu) trước thẻ </body>

<!--An hien Drop Down Menu-->

<script type='text/javascript'>

jQuery(document).ready(function($) {    

  //selector đến menu cần làm việc

  var TopFixMenu = $("#drnavbar");

  // dùng sự kiện cuộn chuột để bắt thông tin đã cuộn được chiều dài là bao nhiêu.

    $(window).scroll(function(){

    // Nếu cuộn được hơn 150px rồi

        if($(this).scrollTop()&gt;150){

      // Tiến hành show menu ra    

        TopFixMenu.show();

        }else{

      // Ngược lại, nhỏ hơn 150px thì hide menu đi.

            TopFixMenu.hide();

        }}

    )

});

</script>

4. Lưu Mẫu (Lưu chủ đề) - nhấp chọn Bố cục.

5. Thêm tiện ích, chọn tiện ích HTML/Javascrip 

6. Copy và dán đoạn code sau (chữ đỏ) vào khung nội dung của tiện ích, để trống tiêu đề

<div id='drnavbar'> 

    <ul id='drnav'> 

    <li>

    <a href='Link 1'>Tên 1</a></li>

        <li>

        <a href='Link 2'>Tên 2</a></li>

        <li>

        <a href='Link 3'>Tên 3</a>

        <ul>

                <li><a href='Link 3-1'>Tên 3-1</a></li>

                <li><a href='Link 3-2'>Tên 3-2</a></li>

                <li><a href='Link 3-3'>Tên 3-3</a></li>

                <li><a href='Link 3-4'>Tên 3-4</a></li>

              </ul>

        </li>

        <li>

           <a href='Link 4'>Tên 4</a>

            <ul>

                <li><a href='Link 4-1'>Tên 4-1</a></li>

                <li><a href='Link 4-2'>Tên 4-2</a></li>

                <li><a href='Link 4-3'>Tên 4-3</a></li>

                <li><a href='Link 4-4'>Tên 4-4</a></li>

        <li>

        <a href='Link 5'>Tên 5</a></li>

       <li>

        <a href='Link 6'>Tên 6</a></li>

    </ul>  

</div>

7. Thay thế các link nhãn và tên menu tùy ý.

8. Nhấp Lưu tiện ích - Lưu sắp xếp.

9. Nhấp Xem blog.