Một dạng menu đẹp mắt theo kiểu metro, menu này thích hợp cho các website bán hàng trực tuyến.


DEMO
Cách thực hiện:
1. Đăng nhập vào Blog.
2. Chọn thêm tiện ích.
3. Chọn HTML.
4. Dán toàn bộ đoạn code sau vào trong HTML và kéo HTML tới vị trí mong muốn.
<!-- Metro menu style-->
<div id='top-navi-slider'>
<div class='navigation-banner'>
<div class='navigation'>
<ul class='col1'>
<li class='mobile'><a href='#'>Điện thoại di động</a></li>
<li class='tablet'><a href='#'>Máy tính bảng</a></li>
<li class='laptop last'><a href='#'>Máy ảnh</a></li>
</ul>
<ul class='col2'>
<li class='accessories'><a href='#'>Laptop</a></li>
<li class='application'><a href='#'>Phụ kiện</a></li>
<li class='oldproduct'><a href='#'>Tivi</a></li>
<li class='sim-card'><a href='#'>Máy tính bàn</a></li>
</ul>
</div>
</div>
</div>
<!-- End Metro menu style-->
<style>
/* Metro style menu*/
#top-navi-slider{margin:0 0 10px;padding:0;float:left}
#top-navi-slider .navigation-banner .navigation{float:left;width:420px}
#top-navi-slider .navigation-banner .navigation ul,#top-navi-slider .navigation-banner .navigation ul li,#top-navi-slider .navigation-banner .navigation ul li a{list-style:none;float:left}
#top-navi-slider .navigation-banner .navigation ul li a{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;color:#fff;font-size:14px;line-height:15px;text-align:center;font-family:arial;text-shadow:1px 1px rgba(0, 0, 0, .25);transition:all 300ms ease 100ms;-webkit-transition:all 300ms ease 100ms}
#top-navi-slider .navigation-banner .navigation ul li a:hover{text-decoration:none;border-color:#555;box-shadow:0 1px 25px rgba(0, 0, 0, .4) inset}
#top-navi-slider .navigation-banner .navigation ul{margin-right:2px}
#top-navi-slider .navigation-banner .navigation ul.last{margin-right:0}
#top-navi-slider .navigation-banner .navigation ul li{margin-bottom:2px}
#top-navi-slider .navigation-banner .navigation ul li.last{margin-bottom:0}
#top-navi-slider .navigation-banner .navigation .col1,#top-navi-slider .navigation-banner .navigation .col1 li,#top-navi-slider .navigation-banner .navigation .col1 li a{width:155px}
#top-navi-slider .navigation-banner .navigation .col1 li.mobile a{background-color:#ff8a00;background-image:url(https://lh3.googleusercontent.com/-dQW31yCLQlU/VEZwkf8HIvI/AAAAAAAAJ0o/bhtgbbrLRpQ/s92/dtdd.png);background-position:10px center;height:90px;padding:40px 10px 0 45px}
#top-navi-slider .navigation-banner .navigation .col1 li.mobile a:hover{background-position:100px center;padding-left:10px;padding-right:45px}
#top-navi-slider .navigation-banner .navigation .col1 li.tablet a{background-color:#d9532d;background-image:url(https://lh4.googleusercontent.com/-Szqn3p3mRJI/VEZwmM51oeI/AAAAAAAAJ0M/qcpHJ5lz8Ks/s80/mtbang.png);background-position:10px 0px;height:80px;padding:35px 10px 0 70px;text-align:left}
#top-navi-slider .navigation-banner .navigation .col1 li.tablet a:hover{background-position:100px 0px;padding-left:10px;padding-right:70px}
#top-navi-slider .navigation-banner .navigation .col1 li.laptop a{background-color:#b61b43;background-image:url(https://lh3.googleusercontent.com/-MgSsQPllHEU/VEZwl-FRGAI/AAAAAAAAJ0A/YiGJL4MqDTg/s63/mayanh.png);background-position:10px 0px;height:63px;padding:25px 10px 0 90px;text-align:left}
#top-navi-slider .navigation-banner .navigation .col1 li.laptop a:hover{background-position:95px 0px;padding:25px 10px 0 15px}
#top-navi-slider .navigation-banner .navigation .col2,#top-navi-slider .navigation-banner .navigation .col2 li,#top-navi-slider .navigation-banner .navigation .col2 li a{width:140px}
#top-navi-slider .navigation-banner .navigation .col2 li a{padding:0 5px}
#top-navi-slider .navigation-banner .navigation .col2 li.accessories a{background-color:#0084cc;background-image:url(https://lh4.googleusercontent.com/-6k6e1j5YkXc/VEZwlo5T5aI/AAAAAAAAJ0U/nNDotseQpzw/s60/laptop.png);background-position:15px 0px;height:60px;padding-top:24px;padding-left:80px;text-align:left}
#top-navi-slider .navigation-banner .navigation .col2 li.accessories a:hover{background-position:75px 0px;padding-left:20px}
#top-navi-slider .navigation-banner .navigation .col2 li.sim-card a{background-color:#9f005d;background-image:url(https://lh3.googleusercontent.com/-ChauqaRm0V4/VEZwmX6_AnI/AAAAAAAAJ0Y/a33kruf5OzY/s82/pc.png);background-position:0px 0px;height:82px;padding-left:50px;padding-top:30px;text-align:left}
#top-navi-slider .navigation-banner .navigation .col2 li.sim-card a:hover{background-position:88px 0px;padding-left:5px;padding-right:47px}
#top-navi-slider .navigation-banner .navigation .col2 li.application{width:70px;margin-right:2px}
#top-navi-slider .navigation-banner .navigation .col2 li.application a{background-color:#258905;background-image:url(https://lh4.googleusercontent.com/-CiIK1GeI8sw/VEZwlc-8a7I/AAAAAAAAJz4/IBxdIZL7KV8/s78/headphone.png);background-position:center 0px;height:92px !important;padding-top:55px;width:70px}
#top-navi-slider .navigation-banner .navigation .col2 li.application a:hover{background-position:center 35px;padding-top:10px}
#top-navi-slider .navigation-banner .navigation .col2 li.oldproduct{width:66px;margin-right:2px}
#top-navi-slider .navigation-banner .navigation .col2 li.oldproduct a{background-color:#7fba00;background-image:url(https://lh3.googleusercontent.com/-X8cZ2DISFLI/VEZwmlx2ipI/AAAAAAAAJ0Q/Lt6-6xZnupM/s62/tv.png);background-position:center 0px;height:92px;padding-top:55px;width:68px}
#top-navi-slider .navigation-banner .navigation .col2 li.oldproduct a:hover{background-position:center 35px;padding-top:10px}
#top-navi-slider .navigation-banner .navigation .col3{width:101px}
#top-navi-slider .navigation-banner .navigation .col3 li{width:101px}
#top-navi-slider .navigation-banner .navigation .col3 li.promotion a{background-image:url(https://lh5.googleusercontent.com/-4A4uHIKx75o/VEZwkW7dRII/AAAAAAAAJ0c/cOW851cvdDE/s61/caidat.png);background-position:0px 0px;height:61px;padding-top:23px;text-align:left;padding-left:45px}
#top-navi-slider .navigation-banner .navigation .col3 li.promotion:hover a{padding-left:10px;background-position:60px 0px}
#top-navi-slider .navigation-banner .navigation .col3 li.sim-card a{background-image:url(https://lh3.googleusercontent.com/-AlSqdmRgizg/VEZxWSoXjxI/AAAAAAAAJ04/foZrEyArapU/s59/tuvan.png);background-position:0px 0px;height:59px;padding-top:23px;text-align:left;padding-left:45px}
#top-navi-slider .navigation-banner .navigation .col3 li.sim-card:hover a{padding-left:10px;background-position:60px 0px}
#top-navi-slider .navigation-banner .navigation .col3 li.news a{background-image:url(https://lh3.googleusercontent.com/-Cp60A0kwEJ4/VEZxWi-CSOI/AAAAAAAAJ08/BL3lH6OgO30/s59/tintuc.png);background-position:0px 0px;height:59px;padding-top:23px;text-align:left;padding-left:45px}
#top-navi-slider .navigation-banner .navigation .col3 li.news:hover a{padding-left:10px;background-position:60px 0px}
#top-navi-slider .navigation-banner .navigation .col3 li.find-shop a{background-image:url(https://lh4.googleusercontent.com/-M7qPbI-f6js/VEZwkeWYkqI/AAAAAAAAJ0g/NtY2HGyF-Xs/s55/dathang.png);background-position:0px 0px;height:54px;padding-top:18px;text-align:left;padding-left:40px}
#top-navi-slider .navigation-banner .navigation .col3 li.find-shop:hover a{padding-left:5px;background-position:60px 0px}
#top-navi-slider .navigation-banner .navigation .col3 li a{background-color:#e7e7e7;height:51px;padding-top:18px;width:101px;color:#666;text-shadow:none}
/* End */
</style>
Chúc thành công, chỗ nào chưa hiểu hãy để lại tin nhắn, chúng tôi sẽ hướng dẫn