Ошибка в раскрывающемся меню

Question

Я работаю на шаблон, который платную версию этого http://risenmagz.blogspot.in

1. Существует некоторая проблема с падением вниз, как это не работает при наведении мыши, и мы должны нажать ее открытый.

2. и после того, как мы нажимаем верхнюю часть, открываем меню, есть проблема в закрытии, так как она не закрывается мышью на странице или в любом месте.

CSS для меню:

/* 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 для меню:

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

Для демонстрации меню, которое не работает, пожалуйста, проверьте: http://risenmagz.blogspot.in

спасибо)

Answer 1

Похоже, что для этого используется некоторый код js, однако я исправил это только css. Добавление следующего кода будет работать:

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