<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p, ul, li, div, nav { padding:0; margin:0; } body { font-family:Roboto; }
#menu { overflow: auto; position:relative; z-index:2; }
.parent-menu { background-color: #ffffff; min-width:200px; float:left; }
#menu ul { list-style-type:none; }
#menu ul li a { padding:10px 15px; display:block; color:#000000; text-decoration:none; }
#menu ul li a:hover { background-color:#35baf2; }
#menu ul li:hover > ul { left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; }
#menu ul li > ul { position: absolute; background-color: #35baf2; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; }
#menu ul li > ul li a:hover { background-color:#2e2e2e; }
</style>
</head>
<body>
<nav id="menu">
<ul class="parent-menu">
<li><a href="#">Máy Lọc Nước Gia Đình</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Máy Lọc Nước Nhập Khẩu</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul></li>
<li><a href="#">Máy Lọc Nước Nano</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul></li>
<li><a href="#">Máy Lọc Nước RO</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Máy Lọc Nước Giếng</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Máy Lọc Nước Văn Phòng</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
EmoticonEmoticon