Vertical Navigation bar not displaying all items - html

Question

I'm fairly new to html and css and I have completed the css styling and html for a site and have started working on the mobile version. However I am having trouble displaying the navigation bar as I am switching from horizontal to vertical, I would prefer not to change the html and just focus on a fix in css. Currently it is only displaying the last item of the list and suspect they might be stacking on top of each other but I am unsure. Please help.
the html for this part is
<nav class="topnav">
<ul>
<li>Home </li>
<li>Pendants</li>
<li>Lamp</li>
<li>Wall</li>
<li>Outdoor</li>
<li>Sale</li>
</ul>
</nav>
And the css is
.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

the problem is with position: absolute; of .topnav a
try this code. replace this with your CSS, also I comment out my every changes.
.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;
}