Navbar problem

navbar li elements are showing in backword

by Muhammad Khan

HTML

<nav class="mynav">
      <v-toolbar extended extension-height="10" color="blue">
        <v-row>
            

          <v-col cols="3" class=" hidden-md-and-down"> 
              <v-toolbar-title  class="text-uppercase white--text" style="margin-top:15px;">
                  <router-link to="/" style="text-decoration:none; color:white;">
                      <span class="font-weight-light">SUMMER</span>
                      <span>store</span>
                  </router-link>      
              </v-toolbar-title>
            </v-col>
          <v-col cols="6" class="nav-el hidden-md-and-down" > 
              <div class="navbar">
                 <ul>
                    <li>
                      <a href="#">HOME</a>
                    </li>
                    <li>
                      <a href="#">ABOUT US</a>
                    </li> 
                    <li> 
                      <a href="#" class="dropbtn">SHOP</a>
                        <div class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                    </li>
                    <li>
                      <a href="#">CONTACT US</a>
                    </li>
               </ul>
              </div>
            </v-col>
            

            <v-col cols="3" class="nav-icon">
                  <div class="crossSearch">
                        <i class="fas fa-times crossSearch" v-if="crossSearch" @click="showSearch"></i>    
                  </div>
                  <div class="searchbar">
                        <v-text-field   color="white darken--1" label="Search" v-if="searchbar">  </v-text-field>
                  </div>
                  <v-btn icon>
                        <v-icon  class="hidden-md-and-down" style="color:white; margin-top:10px; font-size:30px;" v-if="searchIcon" @click="showSearch">mdi-magnify</v-icon>
    ...

CSS

.mynav .nav-el{
  margin-top: 20px;
  text-align: center;
  
}
.mynav .nav-icon{
  text-align: right;
}
.mynav .nav-icon .searchbar{
  margin-top: 10px;

}
.mynav .navbar{
  border: white;
}
.mynav .navbar li{
  text-decoration: none;
  display: inline-block;
  padding-left: 10px; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: large;
}
.mynav .navbar a{
  text-decoration: none;
  color : white;
  padding: 15px;
  background-color: #2196F3;
}
.mynav .navbar a:hover{
  background-color: rgb(89, 160, 241);
  color: rgb(255, 255, 255);
}

.mynav .crossSearch{
  color:red;
  font-size: large;
  margin-top: 10px;
  margin-right: 15px;
  cursor: pointer;
}
.mynav .mybtn :hover{
  pointer-events: none;
}
 .mynav .mobile-view .navbar{
   margin-top: 60px ;
   text-align: center;
 }
.mynav .mobile-view .navbar li{
   text-decoration: none;
  display: inline-block;
  padding-left: 15px; 
  font-family: Arial, Helvetica, sans-serif; }

 
  .mynav .navbar .dropdown-content{
  position: absolute;
  background-color: #c50000;
  min-width: 120px;
  visibility: visible;

  }
    .mynav .navbar .dropdown-content a {
  color: rgb(255, 0, 0);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.mynav .navbar .dropdown-content a:hover {background-color: rgb(211, 248, 0);}