.note-nav{ position: fixed; left: 0; top: 0; z-index: 99999; } input[id*="joacims-menu"] { display:none; } input[id*="joacims-menu"] + label { display:block; width:40px; height:40px; background:#64807d; cursor:pointer; font-size:30px; color:#fff; position:relative; } input[id*="joacims-menu"] + label span { display:block; position:absolute; top: 8px; left: 5px; transition:.2s; } input[id*="joacims-menu"]:checked + label span { transform:rotate(45deg); font-size:34px; top:0px; left:5px; } .note-nav a { display:block; height:40px; line-height:40px; background:#3e3e3e; width:100px; padding-left:10px; text-decoration:none; color:white; box-shadow:5px 0 0 #000; } input[id*="joacims-menu"] ~ nav a:nth-child(1) { box-shadow:5px 0 0 #3498db; transition-delay:.05s; } input[id*="joacims-menu"] ~ nav a:nth-child(2) { box-shadow:5px 0 0 #2ecc71; transition-delay:.10s; } input[id*="joacims-menu"] ~ nav a:nth-child(3) { box-shadow:5px 0 0 #e67e22; transition-delay:.15s; } input[id*="joacims-menu"] ~ nav a:nth-child(4) { box-shadow:5px 0 0 #c0392b; transition-delay:.20s; } input[id*="joacims-menu"] ~ nav a:nth-child(5) { box-shadow:5px 0 0 #2c3e50; transition-delay:.25s; } input[id*="joacims-menu"] ~ nav a:nth-child(6) { box-shadow:5px 0 0 #f1c40f; transition-delay:.30s; } input[id*="joacims-menu"]:checked ~ nav a { margin-left:0px; } input[id*="joacims-menu"]:checked ~ nav a:hover { width:110px; } input[id*="joacims-menu"] ~ nav a { margin-left:-110px; transition:.6s margin; } input[id*="joacims-menu"] ~ nav a:hover { background:#999; }