Error in dropdown menu

Question

I am working on a template which is paid version of this http://risenmagz.blogspot.in

1. There is some problem with the drop down as it does not work on mouse over and we have to click it to open.

2. and after we click top open the menu, there is some issue in closing as it doesn't close on mouse over on the page or anywhere.

CSS for menu:

/* Menu */
#class_menu{background:#a91717;clear:both;height:60px;position:relative;margin:0 auto;padding:0;}
.container_search{display:block;position:absolute;top:0;right:0;width:100%;}
.container_search .searchbox-input:visit{z-index:2}
.navi{clear:both;font-family:'Roboto', sans-serif;padding:0;margin:0 auto;height:60px;transition:all .3s ease-in;position:relative;display:inline-block;z-index:1}
.navi ul{margin:0 auto;padding:0}
.navi li.first:before{height:0;margin:0;padding:0}
.navi li{display:inline-block;margin:0}
.navi li a{display:block;color:#f7f7f7;font-family: "Poppins", "Roboto", "Arial", sans-serif;font-weight:600;padding:0 15px;height:60px;line-height:60px;font-size:15px;text-transform:capitalize;letter-spacing:0.2px}
.navi li a i{font-size:18px!important;font-weight:normal!important;margin-left:10px;}
.navi li a:hover{color:#fafafa}
.navi li ul li {height:auto;margin:0 !important;padding:0 !important}
.navi li ul li a {background:#a91717;color:#fff !important;float:none;padding:0 15px;height:45px;line-height:45px;margin:0 auto!important;width:100%;max-width:240px;height:auto;border-bottom:1px solid #444;outline:none !important;transition: visibility 0.5s;}
.navi ul ul li a:hover {color:#fff !important;background:#a91717}
.navi li.dropdown-menu {position: relative;display: inline-block;cursor:pointer}
.navi ul li.hover ul {display:block;}
.navi li ul.dropdown-menu-content {visibility: hidden;list-style:none;position:absolute;left:0;right:0;z-index:1;transition: visibility 0.5s;padding:0 !important;margin:0 !important}
.navi li.dropdown-menu:focus .dropdown-menu-content {visibility: visible;padding:0 !important;margin:0 !important}
#show-menu,#close-menu{transition:all .3s ease-in;display:none}
.container{height:60px;position:absolute;top:0;width:100%;right:0;left:0}

HTML for the menu:

<div class='class_menu' id='class_menu'>
<div class='show-menu' id='show-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-bars'/></a></div>
<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></a></div>
<nav class='navi menu-mobile' id='mobile-menu-show' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li class='first'><a href='/' itemprop='url' rel='tag nofollow' title='Homepage'><span itemprop='name'><i class='fa fa-home'/></span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 1'><span itemprop='name'>Clean</span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 2'><span itemprop='name'>Original</span></a></li>
<li class='dropdown-menu' tabindex='0'><a><span>Dropdown</span> <i aria-hidden='true' class='fa fa-angle-down'/></a>
<ul class='dropdown-menu-content'>
<li><a href='/' itemprop='url' title='Dropdown 1'><span itemprop='name'>Dropdown 1</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 2'><span itemprop='name'>Dropdown 2</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 3'><span itemprop='name'>Dropdown 3</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 4'><span itemprop='name'>Dropdown 4</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 5'><span itemprop='name'>Dropdown 5</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 4'><span itemprop='name'>Fantastic</span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 5'><span itemprop='name'>Hologram</span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Hypothesis</span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Alliance</span></a></li>
<li><a href='//gridisme.blogspot.com/error404.html' itemprop='url' rel='tag nofollow' title='Menu 7'><span itemprop='name'>Error 404</span></a></li>
</ul></nav>
<div class='container_search'>
    <form action='/search/max-results=7' class='searchbox'>
        <input class='searchbox-input' name='search' onkeyup='buttonUp();' placeholder='Type to Search' type='search'/>
      <input class='searchbox-submit' type='submit' value='GO'/>
        <span class='searchbox-icon'><i aria-hidden='true' class='fa fa-search'/></span>
    </form>
</div>
  </div>

For demo of the menu which is not working please check: http://risenmagz.blogspot.in

Thanks so much :)

Answer 1

Looks like there is some js code using for this, however I have made fix this by css only. Adding the following code will work:

.navi li ul{
    visibility:visible !important;
    display:none
}
.navi li:hover ul{
    display:block
}