Bài viết này mình sẽ hướng dẫn các bạn cách tạo một menu xổ dọc từ dưới lên trên, Với mẫu menu này blog bạn sẽ trở nên đặc biệt hơn trong mắt độc giả, và biết đâu nó lại là nhân tố giúp blog của bạn thu hút thêm được nhiều độc giả phải không nào.
Chắc hẳn bạn chưa nghe đến mẫu menu này bao giờ phải không. Bài viết này được namkna viết theo yêu cầu của bạn Luân Hồ trong bài viết này Các bạn có thể xem hình ảnh demo của menu này như hình ảnh bên dưới hoặc là xem trên blog demo nha:
Menu xổ dọc từ dưới lên trên cho blogspot
ảnh minh họa cho menu


VIEW DEMO

☼ Cách tạo Menu xổ dọc từ dưới lên trên cho blogspot

1- Đăng nhập vào Blog
2- Vào Phần tử trang 
3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)
4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.
<style type='text/css'>
    body{padding: 3em; }
#menu * { 
    padding:0; 
    margin: 0; 
    font: 12px georgia; 
    list-style-type:none;}
#menu { 
    margin-top: 300px;
    float: left;
    line-height: 10px; 
    left: 200px;}
#menu a { 
    display: block; 
    text-decoration: none; 
    color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover { 
    background: #ECF1E7; 
    padding-left:9px;
    border-left: solid 1px #000;}
#menu ul li ul li {
    width: 140px; 
    border: none; 
    color: #B0BD97;  
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #B0BD97;}
#menu ul li ul li a { 
    font: 11px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px;}
#menu ul li {
    float: left; 
    width: 146px; 
    font-weight: bold; 
    border-top: solid 1px #283923; 
    border-bottom: solid 1px #283923; 
    background: #979E71;}
#menu ul li a { 
    font-weight: bold;
    padding: 15px 10px;}
#menu li{ 
    position:relative; 
    float:left;}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 140px;}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block;}
#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;}
#menu:hover ul li:hover ul { 
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom:100%;
}
  </style>
<div id="menu">
    <ul>

        <li><center><a href="/">Home</a></center>
                <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Disclaimer</a></li>
                </ul>
        </li>   

        <li><center><a href="#">Practice Areas</a></center>
                <ul>
                        <li><a href="#">Civil Law</a></li>
                        <li><a href="#">Criminal Law &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &rsaquo;</a>
                            <ul>
                                <li><a href="#">Joomla</a></li>
                                <li><a href="#">Drupal</a></li>
                                <li><a href="#">Wordpress</a></li>
                        </li></ul>
                        <li><a href="#">Family Law &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &rsaquo;</a>
                            <ul>
                                <li><a href="#">Joomla</a></li>
                                <li><a href="#">Drupal</a></li>
                                <li><a href="#">Wordpress</a></li>
                        </li></ul>
                        <li><a href="#">Personal Injury &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;</a>
                            <ul>
                                <li><a href="#">Joomla</a></li>
                                <li><a href="#">Drupal</a></li>
                                <li><a href="#">Wordpress</a></li>
                        </li></ul>
                    <li><a href="#">Traffic Offenses &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;</a>
                            <ul>
                                <li><a href="#">Joomla</a></li>
                                <li><a href="#">Drupal</a></li>
                                <li><a href="#">Wordpress</a></li>
                    </li> </ul>
                    <li><a href="#">FAQ</a> </li>
                </ul>
        </li>

        <li><center><a href="#">Attorney</a></center>
                <ul>
                        <li><a href="#">X</a></li>
                        <li><a href="#">X</a></li>
                        <li><a href="#">X</a></li>
                        <li><a href="#">X</a></li>
                </ul>
        </li>

        <li><center><a href="#">Contact Us</a></center>
            <ul>
                    <li><a href="#">Locations &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&rsaquo;</a>
                        <ul>
                                <li><a href="#">Rockville Office</a></li>
                                <li><a href="#">Frederick Office</a></li>
                                <li><a href="#">Greenbelt Office</a></li>
                    </li></ul>
                                <li><a href="#">Phone Directory</a></li>
                                <li><a href="#">Mailing Address</a></li>
            </ul>

        </li>

        <li><center><a href="#">Resources</a></center>
            <ul>
                        <li><a href="#">Helpful Links</a></li>
                        <li><a href="#">Affiliates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;</a>
                            <ul>
                                <li><a href="#">Healthcare Providers</a></li>
                                <li><a href="#">Insurance Companies</a></li>
                        </li></ul>
        </li></ul>
        <li><center><a href="#">News &amp; Events</a></center>
            <ul>
                        <li><a href="#">Press Articles</a></li>
                        <li><a href="#">Newsletter</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Blog</a></li>
        </li></ul>
        <li><center><a href="#">Espanol</a></center>
            <ul>
                        <li><a href="#">Mamkna menu</a></li>
        </li></ul>

    </ul>
</div>
» Tùy chỉnh:
  • Thay thế các dấu thăng thành liên kết của trang bài viết hoặc trang blog mà bạn muốn. 
  • Thay các tiêu đề bài viết tương ứng màu xanh ngay sau menu của bạn nha,
- Lưu lại và xem kết quả thực hiện nha.

Các bạn hãy đón đọc các style tiếp theo được mình giới thiệu cho kiểu menu này nha,
Lưu ý nhỏ: Vì menu này xổ dọc từ dưới lên trên nên các bạn nên đặt nó giữa trang hoặc đặt dưới chân blog như vậy nó sẽ không bị che khuất bởi trình duyệt khi bạn đặt nó ở trên đầu.
Và tất nhiên nếu có bất kỳ thắc mắc hay khó khăn nào khi áp dụng nó hãy comment ở bên dưới mình sẽ trả lời, và hãy like bài viết này để chia sẻ nó đến với nhiều người hơn và  để ủng hộ namkna nha.