Menu đẹp cho blogger

Để các bạn có một menu như ý muốn, làm đẹp thêm cho blog, hôm nay mình xin hướng dẫn tạo như sau:  Demo
Bước 1. Đặt đoạn code dưới đây vào trước thẻ ]]></b:skin>




#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

:focus { outline: 0 }

.menu ul,.menu li {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:15px;
    text-align:left; }

.menu h3 {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size:12px;
    line-height:15px;
    margin-top:7px;
    margin-bottom:14px;
    padding-bottom:7px;
    text-shadow: 1px 1px 1px #FFFFFF;
    border-bottom:1px solid #888888; }

.menu {
    list-style:none;
    width:600px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;   
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #070534;
    border: 0px solid #a40802;
    border-top: 0px solid #fd190f;   
    background: -moz-linear-gradient(top, #454040, #3D1816);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A3E0C), to(#1C0402)); }

.menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;   
    -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px; }

.menu li:hover {
    z-index:2;
    background:#070534;
    border:1px solid #aaaaaa;
    padding: 4px 9px 4px 9px;   
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));   
    -moz-border-radius: 5px 5px 0px 0px;
        -webkit-border-radius: 5px 5px 0px 0px;
        -khtml-border-radius: 5px 5px 0px 0px;
        border-radius: 5px 5px 0px 0px; }

.menu li.no_drop:hover {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px; }

.menu li a {
    color: #0AF034;
    outline:0;
    text-decoration:none;
    display:block;
    text-shadow: 1px 1px 1px #000; }

.menu li:hover a { color:#0AF034; text-shadow: none; }

.menu li .drop {
    padding-right:21px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPghoEvd3kcsMXJNQeUVSWj3K4w9EQFCBp9g7HKmCv7XA0cmET6Rmz2xJbhPsMvUsvHpAGtkJzm6JIAsjt02MtIW1ZaHPgKXhNHFMcK4yr89QvqRObi8eOwm3ooqmIWaj8t58oZH8kFY/) no-repeat right 8px; }

.menu li:hover .drop {
    padding-right:21px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPghoEvd3kcsMXJNQeUVSWj3K4w9EQFCBp9g7HKmCv7XA0cmET6Rmz2xJbhPsMvUsvHpAGtkJzm6JIAsjt02MtIW1ZaHPgKXhNHFMcK4yr89QvqRObi8eOwm3ooqmIWaj8t58oZH8kFY/) no-repeat right 7px; }

.menu li:hover div a { color:#a40802; }
.menu li:hover div a:hover { color:#360603; }
.menu li ul li a:hover { color:#360603; }

.dropdown_1column,.dropdown_2columns {
    margin:4px auto;
    position:absolute;
    background:#F4F4F4;
    border:1px solid #aaaaaa;
    border-top:none;
    padding:10px 5px 10px 5px;   
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); }

.dropdown_1column,.dropdown_2columns {
    left:-999em;
    text-align:left;
    -moz-border-radius: 0px 5px 5px 5px;
        -webkit-border-radius: 0px 5px 5px 5px;
        -khtml-border-radius: 0px 5px 5px 5px;
        border-radius: 0px 5px 5px 5px; }

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 450px;}

.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto}

.col_1,.col_2 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px; }

.col_1 {width:130px;}
.col_2 {width:440px;}

.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }

.menu li ul li {
    font-size:12px;
    line-height:16px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }

Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.

<b:section id='menu' maxwidgets='0' showaddelement='no'/>
<ul class='menu'>
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">Cot 1</a></li>
<li><a href="#">Cot 2</a></li>
<li><a href="#">Cot 3</a></li>
<li><a href="#">Cot 4</a></li>
<li><a href="#">Cot 5</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>

<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">

<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>

<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>

<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>

<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>

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

Xin chào các bạn ghé thăm trang Trần Phúc Minh, mong các bạn có nhận xét góp ý cho trang này