Vertical Navigation bar not displaying all items-CodePudding

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 >
    <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>

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

CodePudding user response：

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;
}