Hướng dẫn tạo dropdown menu bằng css

Hiện nay rất nhiều bạn có nhu cầu tạo dropdown menu là một dạng menu ngang kiểu mẹ con.Tức là trên menu ngang có chuyên mục mẹ và chuyên mục con.Đặc biết là các shop bán nhiều mặt hàng rất hay làm kiểu menu này.Nhìn rất chuyên nghiệp.Các bạn có thể xem qua hình để hình dung rõ hơn.

Đây là một dạng tạo dropdown menu bằng css rất đợn giản ,cách này thường được rất nhiều người sử dụng vì nó được làm bằng css nên hoàn toàn không ảnh hưởng gì đến tốc độ load trang.Đê làm dropdown menu như trên các bạn có thể làm như sau:

Đầu tiên bạn hãy đăng nhập vào blogspot -> chọn mẫu -> Chỉnh sửa html :

Tìm đọc code sau :

]]></b:skin>

Sau đó chén đoạn code dưới đây vào trước thẻ ]]></b:skin>: trên nhé :

/* CSS Dropdown Menu */
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li a
{
display: block;
padding: 25px 40px;
text-decoration: none;
}
nav ul li
{
float: left;
}
nav ul ul li
{
position: relative;
float: none;
}
/*Third Step*/
nav ul ul
{
position: absolute;
top: 100%;
}
nav ul ul ul
{
position: absolute;
left: 100%;
top: 0;
}
/*Colors*/
nav ul
{
background: #0052a4;
background: linear-gradient(top, #0052a4 0%, #0052a4 100%);
background: -moz-linear-gradient(top, #0052a4 0%, #0052a4 100%);
background: -webkit-linear-gradient(top, #0052a4 0%,#0052a4 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
border-radius: 10px;
}
nav ul li:hover
{
background: #C0C0C0;
background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
}
nav ul ul
{
background: #C0C0C0;
background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
border-radius: 0px;
padding: 0;
}
nav ul ul li
{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
nav ul li a
{
color: #FFF;
}
nav ul li:hover a
{
color: #000;
}
nav ul ul li a
{
color: #fff;
}
nav ul ul li a:hover
{
color: #fff;
background: #0052a4;
}

Tiếp theo bạn hãy chèn code dưới đây vào vị trí mà bạn muốn đặt menu ngang:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a>
<ul>

<li><a href="#">Fun</a></li>
<li><a href="#">freebies</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Archives</a>
<ul>
<li><a href="#">January</a></li>
<li><a href="#">February</a></li>
</ul>
</li>
<li><a href="#">AboutMe</a></li>
</ul>
</nav>

Các bạn thêm link và tên cho phù hợp với blog của bạn rồi lưu tempalte lại nhé.Quay lại blog và kiểm tra ngay nào.

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

Từ khóa : tạo dropdown menu

Xem thêm >> Cách xóa link ảnh trong bài viết blogspot