<h1>垂直滚动菜单</h1>

​

<div class="vertical-menu">

  <a href="#" class="active">Home</a>

  <a href="#">Link 1</a>

  <a href="#">Link 2</a>

  <a href="#">Link 3</a>

  <a href="#">Link 4</a>

  <a href="#">Link 5</a>

  <a href="#">Link 6</a>

  <a href="#">Link 7</a>

  <a href="#">Link 8</a>

  <a href="#">Link 9</a>

  <a href="#">Link 10</a>

</div>

.vertical-menu {

    width: 200px;

    height: 150px;

    overflow-y: auto;

}

​

.vertical-menu a {

    background-color: #eee;

    color: black;

    display: block;

    padding: 12px;

    text-decoration: none;

}

​

.vertical-menu a:hover {

    background-color: #ccc;

}

​

.vertical-menu a.active {

    background-color: #4CAF50;

    color: white;