下拉菜单媒体屏幕在悬停时未关闭

Question

Actually when we open site on mobile screen or below 1024(as set) the mobile menu appears.

1. So in mobile menu when we click on dropdown menu to show the option it works fine but to close the dropdown nothing can be done.

But to close the "Dropdown" only no option is there except to close the whole menu. but when we see on other site if we see the dropdown it closes on clicking around somewhere on the site or hover on anything but here nothing can be done.

/* Menu mobile - tablet - smartphone */

#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 code for the above 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>

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

Thanks so much :)

Answer 1

Why don't you just use the hover selector here? This would allow users on smartphones to interact as wanted because the "hover" event is triggered on user tap. It would also be easier for computer screens.

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