Question

我正在使用jQuery dropmenu来导航此站点：http://184.173.208.195/~secoast/这显然正在开发中。尽管jQuery错误表明.dropmenu不是函数，但drop菜单仍能正常工作。

目前的主要问题是菜单隐藏在页面上的其他内容之后。我怀疑这可能部分是由于jQuery错误。 dropmenu模块最初包含一个noconflict部分，因此它不会与其他库模块冲突。

为了涵盖所有基础，这里是jQuery文件的开头（jquery.dropmenu.js）：

$.fn.dropmenu = function(custom) {

    // Default plugin settings
    var defaults = {
      openAnimation: "size",
        closeAnimation: "slide",
        openClick: false,
        openSpeed: 300,
        closeSpeed: 200,
        closeDelay: 200,
        onHide: function(){},
        onHidden: function(){},
        onShow: function(){},
        onShown: function(){},
        zindex: 100,
        openMenuClass: 'open',
        autoAddArrowElements: true
    };

然后在主文件上我有以下代码：

<script>
$(document).ready(function(){
    $("#nav-one").dropmenu({
            openAnimation: "size",
            closeAnimation: "slide",
            openSpeed: 300,
            closeSpeed: 200,
            closeDelay: 500,
            zindex: 1000
    });
});
</script>

最后这是导航菜单：

<ul id="nav-one" class="dropmenu css-only">
  <li><a href="#">About Us</a>
    <ul>
          <li><a href="#">Support</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">Your work</a></li>
        </ul>
  </li>
  <li> 
    <a href="#">Why the Southeast</a>
    <ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Examples</a></li>
      <li><a href="#">Your work</a></li>
    </ul>
  </li>
  <li> 
    <a href="#">What We Do</a>
    <ul>
      <li><a href="#">Tools</a></li>
      <li><a href="#">Office</a></li>
      <li><a href="#">Custom projects</a></li>
    </ul>
  </li>
  <li> 
    <a href="#">Resources</a></li>
</ul>

非常感谢任何帮助解决这个问题。

感谢。

Answer 1

尝试使用.dropdown和position: relative;扩展z-index: 100;课程;

.dropmenu {
  float: left;
  margin: 50px 0 0 60px;
  padding: 0px;
  border-right: none;
  position: relative;
  z-index: 100;
}

还注意到错误; “ Uncaught TypeError：Object [object Object]没有方法'dropmenu'”。

Answer 2

在尝试任何其他事情之前，我建议你改变：

<script type="text/javascript" src="../js/jquery.dropmenu.js"></script>

要：

<script type="text/javascript" src="js/jquery.dropmenu.js"></script>

注意已删除的../，无疑是一个小错过，但非常重要;）

Answer 3

您需要使用z-index通过使用非常高的数字来使元素高于一切。

以下是截图：

Screenshot

正如您所看到的，我只是使用z-index: 9005

更改了样式

如何调整下拉菜单以显示在内容上？

3 个答案: