Menu xổ dọc từ dưới lên trên cho blogspot

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.

☼ 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.

Nguồn: Namkna Blog!