dropdown open on clicking link in menu works in pc view but not working on mobile view

  css, html, javascript, jquery

I am trying to make a dropdown if click on the link button moves upside and menu appears.
This is working well on pc view but when I have seen it on mobile the link disappears but no menu is showing.
I don’t know why this problem is happening.
here is my site
https://empowerers.co/

here is the code below that I used.

 <ul>                 
        <li class="dropdown" style="line-height: 2.0em; ">
            <a href="#" style="cursor:pointer; font-family: times new roman;  outline: none;" v-on:mouseover="mouseoverList" v-on:mouseleave="mouseleaveList">HOME</a>
            <ul class="dropdown-menu" style="">
                <li><a href="https://www.empowerers.co/" style="cursor:pointer; font-family: gabriola" v-on:click="pageTransition" v-on:mouseover="mouseoverList" v-on:mouseleave="mouseleaveList">About Empowerers</a></li>
                <li><a href="https://www.empowerers.co/" style="cursor:pointer; font-family: gabriola"
                v-on:click="pageTransition" v-on:mouseover="mouseoverList" v-on:mouseleave="mouseleaveList">Our Services</a></li>
                <li><a href="https://www.empowerers.co/" style="cursor:pointer; font-family: gabriola" v-on:click="pageTransition" v-on:mouseover="mouseoverList" v-on:mouseleave="mouseleaveList">Drives</a></li>
                <li><a href="https://www.empowerers.co/" style="cursor:pointer; font-family: gabriola" v-on:click="pageTransition" v-on:mouseover="mouseoverList" v-on:mouseleave="mouseleaveList">Ebay Templates</a></li>
                <li><a href="https://www.empowerers.co/" style="cursor:pointer; font-family: gabriola" v-on:click="pageTransition" v-on:mouseover="mouseoverList" v-on:mouseleave="mouseleaveList">Contact Us</a></li>
                
            </ul>
        </li>
</ul>

CSS that I used

   ````````````````
    <style>
.li-padding
{
    padding: 0px 3px 0px 0px;
    list-style: none;
}

.dropdown-menu{
        /*width: 100%;  Set width of the dropdown */
  width: 10px;
  display: block;
  position: relative;
  background-color: #259a79;
  
  /*top: 1px;*/
/*  min-width: 160px;*/
  overflow: hidden;
  box-shadow: 1px 3px 15px 5px #259a79;
  z-index: 0;

    }
.dropdown-menu li
{
      color: white;
  font-family: gabriola;
  font-size: 20px;
  padding: 10px 10px;
  text-decoration: none;
    display: block;
    }
    </style>
 `````````````````````````````````````````````````````
and finally, javascript that I used
``````````````````````````````````````````````````````
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        // Show hide popover
        $(".dropdown").click(function(){
            $(this).find(".dropdown-menu").slideToggle("slow");
        });
    });
    $(document).on("click", function(event){
        var $trigger = $(".dropdown");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $(".dropdown-menu").slideUp("fast");
        }            
    });
</script>

Any help will be appreciated

Source: Ask Javascript Questions

LEAVE A COMMENT