写一个垂直列表只占页面的百分之二十位于导航栏下方，列表有以下几项亚洲，欧洲，美洲，非洲，大洋洲，南极洲，当鼠标放上去产生变化

可以使用HTML和CSS来实现这个垂直列表，并在鼠标悬停时产生变化。以下是示例代码：

HTML代码：

<div class="nav">
  <ul>
    <li><a href="#">亚洲</a></li>
    <li><a href="#">欧洲</a></li>
    <li><a href="#">美洲</a></li>
    <li><a href="#">非洲</a></li>
    <li><a href="#">大洋洲</a></li>
    <li><a href="#">南极洲</a></li>
  </ul>
</div>

CSS样式：

.nav {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  padding: 10px;
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
}

li:hover {
  background-color: #d9d9d9;
}

a {
  text-decoration: none;
  color: #333;
}

解释一下这些代码：

- 首先，我们使用了一个 `div` 元素来包含整个导航栏，并设置了它的位置为绝对定位，距离页面顶部的距离为20%（即页面高度的20%），宽度为100%。
- 然后，我们创建了一个无序列表 `ul`，用于包含所有的列表项 `li`。
- 我们去掉了列表项的默认样式（如圆点等），并设置了它们的内边距为10像素，背景颜色为浅灰色。
- 在列表项上设置了一个过渡效果，使背景颜色在0.3秒内从浅灰色变为深灰色。当鼠标悬停在列表项上时，就会触发这个过渡效果。
- 最后，我们为链接 `a` 去掉了下划线，并将文字颜色设置为深灰色。

这样，我们就完成了一个垂直列表，它只占页面高度的20%，并且能够在鼠标悬停时产生变化。