TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (Kiểu 3)

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
    #mbt-menu, #mbt-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #mbt-menu {

    width: 913px; /* Độ rộng của toàn bộ thanh menu */

    margin: 0px auto ;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #mbt-menu:before,

    #mbt-menu:after {

    content: "";

    display: table;

    }

    #mbt-menu:after {

    clear: both;

    }

    #mbt-menu {

    zoom:1;

    }

    #mbt-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #mbt-menu a {

    float: left;

    padding: 12px 28px;

    color: #999;

    text-transform: uppercase;

    font: bold 12,5px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #mbt-menu li:hover > a {

    color: #fafafa;

    }

    *html #mbt-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #mbt-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #mbt-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #mbt-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #mbt-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #mbt-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #mbt-menu ul a {

    padding: 10px;

    width: 170px; /* Độ rộng của menu con */

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #mbt-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #mbt-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #mbt-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #mbt-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #mbt-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #mbt-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #mbt-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="mbt-menu">
    <li><a href="http://dungheineken.blogspot.com/">Trang chủ</a></li>
    <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

   <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>

   <li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>
<li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    </ul>
    </li>

<li>
   <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    </ul>
    </li>



    </ul>


Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước menu chính, kích thước menu con, tiêu đề và đường link liên kết # của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 menu chính nữa thì copy dòng code này.

<li>
    <a href="#">Tên menu chính</a>
    <ul>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>
    <li><a href="#">● Tên menu con</a></li>

    </ul>
    </li>


Dán phía trên thẻ đóng </ul> cuối cùng
(Code của menu này được sưu tầm từ một trang Web nước ngoài, tôi đã chỉnh sửa lại đôi chút để phù hợp hơn...).




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


Sưu tầm bởi : www.meovatcuocsong.blogspot.com