垂直导航栏未显示所有项目

Question

我对html和css相当陌生，我已经完成了一个网站的css样式和html，并开始开发移动版本。然而，当我从水平切换到垂直时，我在显示导航栏时遇到了问题，我宁愿不更改html，只关注css中的修复。目前，它只显示列表的最后一项，并怀疑它们可能叠在一起，但我不确定。请帮忙。

这个部分的html是

<nav class="topnav">
<ul>            
<li><a href="index.html">Home</a> </li>
<li><a href="pendants.html">Pendants</a></li>
<li><a href="index.html">Lamp</a></li>
<li><a href="index.html">Wall</a></li>
<li><a href="index.html">Outdoor</a></li>
<li><a href="pendants.html">Sale</a></li>
</ul>
</nav>

css是

.topnav {
position: relative;
width: 100vw;
height: 40vh;
top: 1vh;
background-color: #072F54;

color: white;
display: block;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
z-index: 9;
}
.topnav a {
position: absolute;
width: 100vw;
background-color: #072F54;
color: white;
text-align: left;
font-size: 1.5em;
padding: 1.5vh 1.5vh;
text-decoration: none;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-top: 0.3vw solid;
border-bottom: 0.3vw solid;
display: block;
z-index: 1;
}
.topnav a:hover {
color: #FBC108;  
transition: 0.5s;
}
.topnav ul {
width: 100vw;
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3vh;
}
.topnav ul li {
width: 100vw;
display: block;
margin-top: 3.3vh;
}

[1]: https://i.stack.imgur.com/L7BNk.png

Answer 1

问题出在.topnav a的position: absolute;上

试试这个代码。用你的CSS替换它，我也会注释掉我的每一个更改。

.topnav {
position: relative;
width: 100vw;
/*height: 40vh;*/
height: auto;
top: 1vh;
background-color: #072F54;

color: white;
display: block;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
z-index: 9;
}
.topnav a {
/*position: absolute;*/
width: 100vw;
background-color: #072F54;
color: white;
text-align: left;
font-size: 1.5em;
padding: 1.5vh 1.5vh;
text-decoration: none;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-top: 0.3vw solid;
border-bottom: 0.3vw solid;
display: block;
z-index: 1;
}
.topnav a:hover {
color: #FBC108;  
transition: 0.5s;
}
.topnav ul {
width: 100vw;
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3vh;
}
.topnav ul li {
width: 100vw;
display: block;
margin-top: 3.3vh;
}