Выпадающее меню медиа-экран не закрывается при наведении

Question

Фактически, когда мы открываем сайт на мобильном экране или ниже 1024 (как установлено), появляется меню мобильного телефона.

1. Таким образом, в мобильном меню, когда мы нажимаем на раскрывающееся меню, чтобы показать этот параметр, он отлично работает, но для закрытия выпадающего меню ничего не может быть сделано.

Но чтобы закрыть «Раскрывающийся» только не вариант там, за исключением, чтобы закрыть все меню. но когда мы видим на другом сайте, если мы увидим раскрывающийся список, он закрывается, щелкая где-то на сайте или навешивая что-либо, но здесь ничего не может быть сделано.

/* Меню мобильного - планшет - смартфон */

#class_menu{height:auto} 
#show-menu{display:block;z-index:3;height:60px} 
#show-menu a,#close-menu a{cursor:pointer;font-size:25px;color:#fff !important;font-weight:normal !important;padding:0;height:60px;line-height:60px;width:60px;text-align:center;position:absolute;z-index:2} 
#mobile-menu-show{display:none;} 
#close-menu{display:none;} 
.navi li{display:block;width:100%;max-width:100%;padding:0 !important;margin:0 !important;text-align:center;list-style:none !important;} 
.navi li.diffr{display:none;} 
.navi li.first:before{content:"";text-decoration:inherit;height:60px;display:block} 
.navi li a{background:#a91717;padding:0!important;margin:0 auto;list-style:none !important;height:45px;line-height:45px;color:#fff!important;border-top:1px solid #bb1919!important;} 
.navi li ul li a{border-color:#bb1919!important;border-bottom:none!important} 
.navi li ul li a:hover{border-color:#bb1919!important;} 
.navi li a:hover{background:#bb1919} 
.navi ul ul li a{text-align:center} 
} 

HTML код выше CSS:

<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 style="background-color:#981414;" class='first'><a href='/' itemprop='url' rel='tag nofollow' title='Homepage'><span style="margin:0 10px;" itemprop='name'><i class='fa fa-home'/></span></a></li> 
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 1'><span itemprop='name'></span></a></li> 
<li class='diffr'>|</li> 
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 2'><span itemprop='name'></span></a></li> 
<li class='diffr'>|</li> 
<li class='dropdown-menu' tabindex='0'><a href="#"><span>Refer and Earn</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'>Recharge Tricks</span></a></li> 
<li><a href='/' itemprop='url' title='Dropdown 2'><span itemprop='name'>Refer and Earn</span></a></li> 
<li><a href='/' itemprop='url' title='Dropdown 3'><span itemprop='name'>ting ling designs and for</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 class='diffr'>|</li> 
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 4'><span itemprop='name'>Shopping Deals</span></a></li> 
<li class='diffr'>|</li> 
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 5'><span itemprop='name'>Coupons</span></a></li> 
<li class='diffr'>|</li> 
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Tech News</span></a></li> 
<li class='diffr'>|</li> 
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Tips a Tricks</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

Почему бы вам просто не использовать селектор hover r здесь? Это позволит пользователям смартфонов взаимодействовать по мере необходимости, потому что событие «hover» запускается при нажатии на пользователя. Это также было бы проще для компьютерных экранов.

/* Used for template only */ 
 
li { 
 
list-style: none; 
 
background-color: red; 
 
color: white; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 
/* Use this */ 
 
li ul{ 
 
    display: none; 
 
    background-color: grey; 
 
} 
 
li ul li{ 
 
    background-color: grey; 
 
} 
 

 
li:hover ul{ 
 
    display: block; 
 
}

<li class='dropdown-menu' tabindex='0'><span>Refer and Earn</span> <i aria-hidden='true' class='fa fa-angle-down'/> 
 
    <ul class='dropdown-menu-content'> 
 
    <li><a href='/' itemprop='url' title='Dropdown 1'><span itemprop='name'>Recharge Tricks</span></a></li> 
 
    <li><a href='/' itemprop='url' title='Dropdown 2'><span itemprop='name'>Refer and Earn</span></a></li> 
 
    <li><a href='/' itemprop='url' title='Dropdown 3'><span itemprop='name'>ting ling designs and for</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> 
 
<p> 
 
    Hover the above text to show sub-menus, go back to this text to hide them again. 
 
</p>