Menu Drop Down 1 cấp cho blogspot Style 4

Hôm nay namkna sẽ giới thiệu đến các bạn một mẫu menu hoạt động bằng CSS chạy rất mượt và thích hợp cho các blogger nhiều nhãn, Đăc biệt khắc phục được nhược điểm làm chậm blog của các mẫu menu sử dụng javarscip.

Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)

   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPbAliKSrPAFLr8duRPsM8BMdoLzQ6bCgVQkVBCAzfXCmBDIc1R96yh3YhrNMh_uTpbgrY0qlL1-CERBK2zhJuoKh8BT_iCczlpd_MJBBMjdHFJA209taZDLpFma3fq1eFNxDCuD5DYiT/h120/seperator-namkna-blogspot.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydr5hYhQJ0MdCPyQz8IfR-3o9LdkHWhAHWncnwZ-H9gmJgzM4nMVhZoRYnf7K-aDnAqFTCBTi5WPY4Uke6zqfURhSPu6EMYkYIo6SUwD13X_Gh9VpqEGzobm4ZJfNYqFUvl71k7R4Fz0y/h120/hover-namkna-blogspot.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Bty76pPru9i3XJ5V3WuGcbnyC974qTaAr0JBMNsSeBRxsV9p3tHwTBXrrq8u4MCXCU5BZulTtYT0Y0O9sx5IFtGyg2j7pRsN_bvfAoz-wgURleBd8wRQH_doJfwmJt4jU6LMJEScZWr3/h120/sub_sep-namkna-blogspot.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfTbNUpcmVZVRIK7okP3e4ODVouiYgAp3wZw5HcE1AQltDhJqR7SCivDLy3UwUPAvyOnYUhg939uPWd6aU69Kt30vF2-dOvGY5nVbfJ_iVSAUZsYr-nFvcMAezlGFnKpbb3PGt_kJeaid/h120/hover_sub-namkna-blogspot.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

6- Click chọn  Lưu mẫu

7- Thêm đoạn code bên dưới vào trước thẻ  </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)

<div class="menu">
<ul>
<li><a href="/" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

- Trong đó:  

• Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
• Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
• Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
• Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.

8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện ích HTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vao:

Chúc thành công!