CSS Dropdown menu đơn giản cho blogspot

Bài viết này namkna sẽ hướng đẫn các bạn thiết kế một mẫu menu đơn giản để đặt trên sidebar hoặc header, Menu hoạt động dựa trên các thuộc tính CSS để góp phần làm giảm tới mức thấp nhất thời gian load trang: Về kiểu dáng menu này chỉ có một tiêu đề duy nhất và nó sẽ được mở rộng ra thêm các menu con khi bạn dê chuột lên phần tiêu đề đó.

Các bạn có thể xem hình minh họa ngay bên cạnh tiêu đề bài viết này:

VIEW DEMO

☼ Cách thêm CSS Dropdown menu dơn giản cho blogspot:

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

2- Vào Bố cục (Layout)

3- Bấm vào thêm tiện ích => Chọn HTML/Javascripts và dán code bên dưới vào.

<style>nav.drop-menu {
  position:relative;
  padding:10px 15px;
  background:#6D92A5;
  width:200px;
  font:bold 12px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#eee;
}

nav.drop-menu:after {
  content:"";
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#fff;
  position:absolute;
  top:16px;
  right:14px;
}

nav.drop-menu ul {
  position:absolute;
  top:100%;
  left:0px;
  z-index:99;
  text-transform:none;
  margin:0px;
  padding:0px;
  background:#6D92A5;
  width:100%;
  font-weight:normal;
  display:none;
}

nav.drop-menu li {
  list-style:none;
  margin:0px;
  padding:0px;
}

nav.drop-menu li a {
  display:block;
  margin:0px;
  padding:7px 15px;
  text-decoration:none;
  color:#ccc;
}

nav.drop-menu li a:hover {
  background:#74838F;
  padding-left:19px;
}

nav.drop-menu:hover ul {
  display:block;
}</style>
<nav class='drop-menu'>
Drop Down Menu
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Portfolio</a></li>
        <li><a href='#'>Contact</a></li>
        <li><a href='#'>Archive</a></li>
        <li><a href='#'>Search</a></li>
        <li><a href='#'>Company</a></li>
    </ul>
</nav>

» Tùy chỉnh:

• Thay dấu thăng màu đỏ (#) thành liên kết URL tới blog, nhãn hoặc bài viết của bạn.
• Thay phần màu xanh thành tiêu đề tương ứng với các liên kết cùng hàng. (Không nên đặt quá dài sẽ xuống dòng không đẹp nha.
• Thay chữ Drop Down Menu thành chữ tiêu đề. Đây là phần luôn hiển thị của menu.

4- Lưu mẫu lại và quay trở lại blog để xem kết quả của bạn nha.