Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<div id="net"> <a href="#" id="page1">page#1</a> <a href="#" id="page2">page#2</a> <a href="#" id="page3">page#3</a> <a href="#" id="page4">page#4</a> </div> <style> #net a { position: absolute; left: -80px; transition: 0.3s; padding: 15px; width: 100px; text-decoration: none; font-size: 20px; border-radius: 0 5px 5px 0; } #net a:hover { left: 0; } #page1 { top: 20px; background-color: #960018; color: #fff; } #page2 { top: 80px; background-color: #007FFF; color: #fff; } #page3 { top: 140px; background-color: #66FF00; color: #000; } #page4 { top: 200px; background-color: yellow; color: #000; } </style>
