No Drop down for mobile

Hi I have made my own theme and I am trying to make it responsive for mobile. However I cant seem to disable the hover function from the drop down menu. Can anyone help?

the site is https://simplicityoflife.net/

The html from the php header:

<div id="menu">
<div class="dropdown">
<nav>
<div class="drop_menu">
<?php wp_nav_menu (array('menu' => 'Main Nav Menu')); ?>
</div>
 <?php get_search_form(); ?>

</nav>
</div>
</div>

The css
.drop_menu ul li ul {
position:relative; position: static;
}
.drop_menu ul li ul li { clear: both; display:block;position: static;
}
.drop_menu ul li a{color: #5d8eba;}

.drop_menu ul li { position:relative; background:#FFF;
border-bottom:1px solid white; z-index:20;  }
.drop_menu ul li ul li {
border-bottom:1px solid white; }
.drop_menu ul li ul {
    top: 0px;
left:0px;
background:#FFF;
padding:7px;
text-decoration:none;
z-index:20;
border-color: #fff;
color: #5d8eba;
}
.drop_menu ul li ul:hover {
    position:relative;
    top: -50px;
left:0px;
background:#FFF;
padding:7px;
text-decoration:none;
z-index:20;
border-color: #fff;
color: #5d8eba;
}

.drop_menu ul li ul li a { padding:5px;  background-color: #FFF; width:150px; text-indent:15px;background:#FFF; font:15px arial, verdana, sans-serif;
 padding-left: 10px;   text-transform:lowercase; text-decoration:none;
 z-index:20; border-color: #fff; }
.drop_menu ul li ul li a:hover { margin-left: 3px; text-decoration:none; z-index:20; border-color: #fff; } }
/* End meny */