下拉菜單媒體屏幕在懸停時未關閉

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

以上css的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 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

你為什么不在這里使用懸停選擇器？ 這將允許智能手機上的用戶按需進行交互，因為“懸停”事件是在用戶點擊時觸發的。 電腦屏幕也會更容易。

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