Code Menu dạng trượt ẩn phía trên hoặc dưới web

Mình sẽ chia sẽ thêm một menu dạng trượt ẩn rất hay, với hiệu ứng ẩn phía top web, chỉ cần rê chuột lên top sẽ hiện menu này ra.
Các bạn có thể tham khảo menu này tại vuishopping ở phần danh mục sản phẩm, bạn chỉ cần rê chuột lên top web sẽ hiện menu này ra.
Menu này gồm 2 phần các bạn lưu ý:
Phần 1: các bạn add vào header

• GIẢM GIÁ MỖI NGÀY


• THƯƠNG HIỆU


• PHỤ NỮ


• NAM GIỚI


• MỸ PHẨM


• GIẢM CÂN & TĂNG CÂN


• THỰC PHẨM CHỨC NĂNG


• SẢN PHẨM KHÁC

Phần 2: Các bạn add vào CSS
.overlay{position:fixed;left:0;top:0;height:50px;width:100%;background-color:transparent;z-index:100}
.wrap{width:100%;margin:-12px -20px}
.nav{background-color:#000;height:50px;Text-align:center;position:fixed;width:100%;left:0;top:-50px;z-index:100;-moz-transition:top 0.4s ease;-webkit-transition:top 0.4s ease;-o-transition:top 0.4s ease;-ms-transition:top 0.4s ease;transition:top 0.4s ease}
.overlay:hover ~ .nav,.nav:hover{top:0px}
.navigation{display:inline-block}
.navigation li{display:inline}
.navigation a{display:block;float:left;font-family:helvetica,arial,sans-serif;color:#fff;font-size:13px;height:100%;line-height:50px;text-transform:uppercase;padding:0 15px;font-weight:bold;-moz-transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease}
.navigation li:nth-child(1) a:hover{background-color:#ff3939}
.navigation li:nth-child(2) a:hover{background-color:#73e900}
.navigation li:nth-child(3) a:hover{background-color:#992ff3}
.navigation li:nth-child(4) a:hover{background-color:#ffa32c}
.navigation li:nth-child(5) a:hover{background-color:#fff000}
.navigation li:nth-child(6) a:hover{background-color:#008aff}
.navigation li:nth-child(7) a:hover{background-color:#ff0096}
.navigation li:nth-child(8) a:hover{background-color:#0FF}
Rất đơn giản phải không? chúc các bạn thành công