<div id="mySidenav" class="sidenav">

  <a href="#" id="about">About</a>

  <a href="#" id="blog">Blog</a>

  <a href="#" id="projects">Projects</a>

  <a href="#" id="contact">Contact</a>

</div>

​

<div style="margin-left:80px;">

  <h2>便签效果</h2>

  <p>鼠标移动到指定便签显示隐藏内容。</p>

</div>

#mySidenav a {

    position: absolute;

    left: -80px;

    transition: 0.3s;

    padding: 15px;

    width: 100px;

    text-decoration: none;

    font-size: 20px;

    color: white;

    border-radius: 0 5px 5px 0;

}

​

#mySidenav a:hover {

    left: 0;

}

​

#about {

    top: 20px;

    background-color: #4CAF50;

}

​

#blog {

    top: 80px;

    background-color: #2196F3;

}

​

#projects {

    top: 140px;

    background-color: #f44336;

}

​

#contact {

    top: 200px;

    background-color: #555

}