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

可以使用CSS的flex布局和:hover伪类来实现该效果。

HTML代码：

<div class="container">
  <nav>
    <!-- 导航栏 -->
  </nav>
  <ul class="list">
    <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代码：

.container {
  display: flex;
  flex-direction: column;
}

nav {
  /* 导航栏样式 */
}

.list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none; /* 默认隐藏 */
}

.list li {
  padding: 10px;
}

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

nav:hover + .list {
  display: block; /* 鼠标悬停在导航栏上时显示列表 */
  width: 20%; /* 占据水平页面的20% */
}

解释一下CSS代码：

- `.container` 使用flex布局，将子元素按照列排列。
- `nav` 样式不做解释。
- `.list` 使用flex的属性`flex: 1`将其占据剩余的空间，`margin`和`padding`设置为0，`list-style`去掉默认的列表样式，`display`设置为`none`，默认隐藏。
- `.list li` 设置列表项的样式，包括`padding`和`hover`时的背景色。
- `.list li:hover` 鼠标悬停在列表项上时的样式。
- `nav:hover + .list` 当鼠标悬停在导航栏上时，找到下一个兄弟元素`.list`，将其显示出来，同时设置宽度为20%。