Tạo trình đơn thả xuống với hiệu ứng trượt, chỉ css và không sử dụng javascript

Đây là một menu được tạo bởi css với các slide đẹp mà không cần sử dụng javascript. Điều này giúp trang web tải nhanh hơn.

[html]<input class="dropdown-open" hidden="hidden" id="dropdown-1" type="checkbox" />
<label class="menu-toggle mobile-visible" for="dropdown-1" /></label>
<label class="dropdown-overlay" for="dropdown-1"></label>
<header class="header">
<div class="my-photo" style="text-align: center;">
<img src="https://lh3.googleusercontent.com/-OkFNVpyoeRQ/V3eqIoYB-BI/AAAAAAAABeo/6iYWXx1ai6IM0HG3y1MvbSxc-s336iEOACEwYBhgL/w140-h140-p/icon128.png">
</div>
<div class="site-title-block">
<h1 class="site-title">
ThichCode.NET
</h1>
<p class="site-description">
Solution Code For You</p>
</div>
<div class="site-nav">
<ul class="site-main-menu" id="nav">
<li class="active">
<a href="https://thichcode.net/">
<i class="fa icon0"></i> Home
</a>
</li>
<li>
<a href="https://thichcode.net/p/about-me.html">
<i class="fa icon1"></i> About Me
</a>
</li>
<li>
<a href="https://thichcode.net/p/my-works.html">
<i class="fa icon2"></i> My Works
</a>
</li>
<li>
<a href="https://thichcode.net/p/my-project.html">
<i class="fa icon3"></i> My Project
</a>
</li>
<li>
<a href="https://thichcode.net/search/label">
<i class="fa icon4"></i> My Blog
</a>
</li>
<li>
<a href="https://thichcode.net/p/contact.html">
<i class="fa icon5"></i> Contact
</a>
</li>
</ul>
</div>
</header>[/html][css]<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
label.menu-toggle:before {
content: '\f0c9';
font-family: FontAwesome;
color: #222;
font-size: 21px;
line-height: 50px;
}

label.menu-toggle {
display: block;
position: fixed;
top: 0;
right: 10px;
z-index: 999;
cursor: pointer;
}

.dropdown-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

.dropdown-hover:hover .header,
.dropdown-open:checked~.header {
left: 0;
}

.dropdown-hover:hover .dropdown-overlay,
.dropdown-open:checked~.dropdown-overlay {
display: block;
}

.dropdown-hover:hover .menu-toggle,
.dropdown-open:checked~.menu-toggle:before {
content: '\f00d';
}

.header {
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: 320px;
z-index: 999;
-webkit-box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 5px 0px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
left: -320px;
}

.site-main-menu {
display: block;
padding: 0;
margin: 0;
}

.site-title-block {
position: relative;
z-index: 1;
margin: 20px 20px 10px;
text-align: center;
}

.site-nav {
display: block;
padding: 25px 0 30px;
}

.site-main-menu li {
display: block;
position: relative;
padding: 0;
text-align: center;
}
</style>[/css]