Question

我有两个菜单。一个在顶部，一个在底部。当我将鼠标悬停在底部菜单

时，顶部的子菜单会消失

您可以在此gif image

看到示例

我哪里错了？

修改我正在使用SmatrMenus jquery插件

  <body>

<div id="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-3 hidden-xs">
        <a class="logo" title="Go to Homepage" href="/"> <img src="assets/img/logos/logo-amber-blue.png"> </a>
      </div>
      <div class="col-xs-12 col-sm-9">
        <div class="row">
          <a class="logo visible-xs" title="Go to Homepage" href="/"> <img src="assets/img/logos/logo-amber-blue.png"> </a>
          <nav id="uppernav" class="pull-right">
            <ul id="upmenu" class="sm upmenu">
              <li> <a href="index.html">Help</a>
                <ul>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                  <li> <a href="javascript:void(0)">Void</a> </li>
                </ul>
              </li>
              <li> <a href="index.html">Contacts</a> </li>
              <li> <a href="index.html">login</a> </li>
            </ul>
          </nav>
        </div>
        <div class="row">
          <nav id="topnav"> <input id="topmenu-state" type="checkbox" /> 
            <label class="topmenu-btn" for="topmenu-state">
                <span class="topmenu-btn-icon"></span> Toggle main menu visibility
            </label>
            <ul id="topmenu" class="sm topmenu">
              <li><a href="index.html">Home</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li> <a href="#">Dropdown</a>
                <ul>
                  <li><a href="contacts.html">Contacts</a></li>
                  <li> <a href="#">Dropright Menu</a>
                    <ul>

                      <li><a href="#">Rossiyska</a></li>
                      <li><a href="#">Serenada Dret</a></li>
                      <li><a href="#">Merkava Is The Best</a></li>
                      <li><a href="#">Rossiyska</a></li>
                      <li><a href="#">Serenada Dret</a></li>
                      <li><a href="#">Merkava Is The Best</a></li>
                      <li><a href="#">Rossiyska</a></li>
                      <li><a href="#">Serenada Dret</a></li>
                      <li><a href="#">Merkava Is The Best</a></li>
                      <li><a href="#">Rossiyska</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Choto Tam v Menus</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                  <li><a href="#">Choto Tam</a></li>
                  <li><a href="#">Yatsenuck Di</a></li>
                </ul>
              </li>
              <li><a href="about.html">About</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="page-wrapper">
  <div class="container">
    <h1>This is the Blog page</h1> </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/jquery.smartmenus.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/smartmenus/js/jquery.smartmenus.min.js"></script>
<script src="assets/js/cusom.js"></script>

Fiddle 包含我的所有样式

真实 example

Answer 1

sm-core-css.css有此规则

.sm {
    position: relative;
    z-index: 9999;
}

z-index导致底部菜单显示在顶部下拉菜单的顶部。

删除z-index的规则或手动将其覆盖为auto，您的菜单将正常运行。

CSS。将鼠标悬停在底部菜单上时，子菜单会消失

1 个答案: