Question

我正在处理一个模板，该模板是此http://risenmagz.blogspot.in

的付费版本

下拉列表存在一些问题，因为它在鼠标悬停时不起作用，我们必须点击它才能打开。
在我们点击顶部打开菜单后，关闭时会出现一些问题，因为它没有在鼠标悬停在页面上或任何地方关闭。

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:&#39;Roboto&#39;, 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
}

下拉菜单中出错

1 个答案: