Code Html menu nằm ngang dropdown cho blog và website

Code Html menu nằm ngang dropdown cho blog và website. Một website hoặc blog load cực nhanh giúp cho các độc giả truy cập không bị gián đoạn, do đó các bạn phải thiết kế sao cho nó đơn giản nhất nhưng vẫn đầy đủ chức năng như các website lớn khác. Vâng code này load cực nhanh và mang lại sự hiệu quả tuyệt vời. giúp cho blog hoặc website của bạn sắp xếp ngăn nắp các bài viết của bạn.

Code này ta đặt tromg bố cục phía trên cùng HTML JavaScript đối với blog và trên thẻ <header> đối với website :

<style>

.tabs-inner .widget ul#icbabdrop {

  text-align: left;

  display: inline;

  margin: 0;

  padding: 15px 4px 17px 0;

  list-style: none;

  border:none;

}

.tabs-inner .widget ul#icbabdrop li {

  font-size: 12px/18px;

  font-family: sans-serif; /* Font for the menu */

  display: inline-block;

  margin-right: -4px;

  position: relative;

  padding: 15px 20px;

  background: #fff; /* background colour of the main menu */

  float:none;

  cursor: pointer;

  -webkit-transition: all 0.2s;

  -moz-transition: all 0.2s;

  -ms-transition: all 0.2s;

  -o-transition: all 0.2s;

  transition: all 0.2s;

}

.tabs-inner .widget ul#icbabdrop li a {

padding:0;

font-family: sans-serif; /* Font for the menu links */

border:0;

}

.tabs-inner .widget ul#icbabdrop li:hover {

  background: #555; /* background colour when you roll over a menu title */

  color: #fff; /* font colour when you roll over a menu title */ 

}

.tabs-inner .widget ul#icbabdrop li:hover a {

  background: transparent;

  color: #fff; /* font colour when you roll over a menu title link */ 

}

.tabs-inner .widget ul#icbabdrop li ul {

  z-index:1000; 

  border:none;

  padding: 0;

  position: absolute;

  top: 45px;

  left: 30px;

  float:none;

  width: 150px;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  display: none;

  opacity: 0;

  visibility: hidden;

  -webkit-transiton: opacity 0.2s;

  -moz-transition: opacity 0.2s;

  -ms-transition: opacity 0.2s;

  -o-transition: opacity 0.2s;

  -transition: opacity 0.2s;

}

.tabs-inner .widget ul#icbabdrop li ul li { 

  background: #555; /* background colour of the sub menu items */

  display: block; 

  color: #fff; /* font colour of the sub menu items */

  text-shadow: 0 -1px 0 #000;

}

ul#icbabdrop li ul li a{

  color:#fff  /* link colour of the sub menu items */

}

.tabs-inner .widget ul#icbabdrop li ul li:hover { 

  background: #666; /* background colour when you roll over sub menu items */

}

.tabs-inner .widget ul#icbabdrop li:hover ul {

  display: block;

  opacity: 1;

  visibility: visible;

}</style>

<ul id="icbabdrop">

  <li><a href="Link của bạn cần hiện làm trang chủ">Trang Chủ</a></li>

  <li><a href="Link tùy ý của bạn hoặc có thể để dấu #">Button 1</a>

<ul> 

<li><a href="Link tùy ý của bạn">Thư mục con của button 1</a></li> 

</ul>

  </li>

  <li><a href="#">Button 2</a>

 <ul> 

  <li><a href="Link tùy ý của bạn">Thư mục con của button 2</a></li>

   <li><a href="Link tùy ý của bạn">Thư mục con của button 2</a></li>

   <li><a href="Link tùy ý của bạn">Thư mục con của button 2</a></li> 

</ul>

</li> 

 </ul>

Các bạn có thể tùy biến thêm, nhớ để ý các dòng lệnh màu đỏ và màu xanh, phải khai báo đúng cho nó, niếu không code có thể chạy lỗi hoặc không hiện dropdown.

0phim0 hân hành đồng hành cùng các bạn. Cám ơn các bạn đã đọc bài viết này. Thân chào.