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

可以使用CSS来实现这个垂直列表，代码如下：

HTML代码：

<div class="list">
  <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代码：

.list {
  position: absolute;
  top: 60px;
  right: 0;
  width: 20%;
}

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

.list li {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  padding: 10px;
}

.list li:hover {
  background-color: #ddd;
}

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

.list a:hover {
  color: #fff;
}

解释一下上面的CSS代码：

1. 首先，我们将列表容器 `.list` 的定位方式设置为 absolute，然后将其置于导航栏下方（top: 60px）并靠右（right: 0）。
2. 然后，我们将列表元素的样式设置为无序列表（list-style: none），并移除了默认的内外边距（padding 和 margin）。
3. 我们给每个列表项添加了背景色和底部边框，以及一定的内边距。
4. 当鼠标悬停在列表项上时，我们将其背景色变为灰色。
5. 我们将链接的样式设置为无下划线，黑色字体，当鼠标悬停在链接上时，将其字体颜色变为白色。

这样，就可以实现一个垂直列表只占水平页面的百分之二十，并且当鼠标放上去时产生变化的效果。