Hoverable Sidenav Buttons
=============================
HTML
============================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoverable Sidenav Buttons</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="mySidenav" class="Sidenav">
<a href="#" id="contact">Contact</a>
<a href="#" id="service">Service</a>
<a href="#" id="project">Project</a>
<a href="#" id="blog">Blog</a>
</div>
</body>
</html>
===========================
CSS
===========================
body{
background-color: indigo;
}
#mySidenav a{
font-size: 16px; padding: 15px; width:100px;
text-decoration: none; color: white;
border-radius: 1px 6px 6px 1px;
position:absolute; left:-80px;
}
#mySidenav a:hover{
left:0;
}
#contact{
top:20px; background-color: red;
}
#service{
top:80px; background-color: yellow;
}
#project{
top:140px; background-color:blue;
}
#blog{
top:200px; background-color: green;
}
