Tạo dropdown menu giống template Tech Shadow

Ở những bài trước mình đã giới thiệu một số dạng dropdown menu cho blog. Bài viết này mình sẽ chia sẻ một style cực chất nữa của dropdown menu cho Blogger. Xem demo

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* TS Menu Edited by kjmagic.blogspot.com */
#kj-nav,#kj-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#kj-nav {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#kj-nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#kj-nav li {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#kj-nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#kj-nav li:hover > a {
    color: #00B4FF;
}
#kj-nav li:hover, #kj-nav a:focus, #kj-nav a:hover, #kj-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#kj-nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#kj-nav ul li {
    background: none;
    width: 100%;
}
#kj-nav ul li a {
    float: none;
}
#kj-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#kj-lavalamp {
    background: url('http://www.script-tutorials.com/demos/249/css/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#kj-lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#kj-nav li:nth-of-type(1):hover ~ #kj-lavalamp {
    left: 13px;
}
#kj-nav li:nth-of-type(2):hover ~ #kj-lavalamp {
    left: 90px;
}
#kj-nav li:nth-of-type(3):hover ~ #kj-lavalamp {
    left: 170px;
}
#kj-nav li:nth-of-type(4):hover ~ #kj-lavalamp {
    left: 250px;
}
#kj-nav li:nth-of-type(5):hover ~ #kj-lavalamp {
    left: 330px;
}
#kj-nav li:nth-of-type(6):hover ~ #kj-lavalamp {
    left: 410px;
}
#kj-nav li:nth-of-type(7):hover ~ #kj-lavalamp {
    left: 490px;
}
#kj-nav li:nth-of-type(8):hover ~ #kj-lavalamp {
    left: 565px;
}

Bước 2: Chèn đoạn code sau vào vị trí bạn muốn hiển thị menu:

<!--TS Menu Edited by kjmagic.blogspot.com-->
<ul id="kj-nav">
    <li><a href="http://kjmagic.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://kjmagic.blogspot.com/">Back</a></li>
    <div id="kj-lavalamp"></div>
</ul>
<!--/TS Menu Edited by kjmagic.blogspot.com-->

Bước 3: Chỉnh sửa các link và tên menu cho phù hợp với blog của bạn. Cuối cùng lưu lại và xem kết quả.

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