多级下拉菜单，下拉菜单的问题

Question

菜单在这里：http://voteacnng.org

问题在于dropdown。这是一个WordPress生成的代码。

Css：

.menu-tophorizontalmenu-container {
    margin: 18px auto 21px;
    overflow: hidden;
    width: 1005px;
    display: block;
}

    .menu {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }

    .menu * {
        margin: 0;
        padding: 0;
    }

        .menu a {
            display: block;
            color: #fff;
            padding: 6px 16px;
            background: #000;
        }

        .menu li {
            position: relative;
            float: left;
            font-size: 18px;
            margin: 2px 2px 0 0;
            text-transform: uppercase;
        }

            .menu ul {
                position: absolute;
                top: 33px;
                left: 0;
                background: #000;
                display: none;
                list-style: none;
                z-index: 999px;
            }

                .menu ul li {
                    position: relative;
                    display: block;
                    width: 257px;
                    margin: 0 0 2px 0;
                    padding: 0;
                }

                    .menu ul li a {
                        display: block;
                        padding: 6px 16px;
                        color: #fff;
                        background: #000;
                    }

                    .menu ul li a:hover {
                        background: #1191B7;
                        color: #000;
                    }

                        .menu ul ul {
                            left: 257px;
                            top: 0;
                        }

                        .menu .menulink {

                        }

                        .menu .sub {
                            background: url(img/arrow-left.jpg) no-repeat 136px 8px;
                        }

如果我移除菜单下的幻灯片，它就会起作用。

它还有一个JavaScript：

function mainmenu(){$(" #menu-tophorizontalmenu ul ").css({display: "none"}); // Opera Fix $(" #menu-tophorizontalmenu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });} $(document).ready(function(){                  
mainmenu();});

另一个问题是箭头。箭头需要显示在子菜单所在的位置。

有什么想法吗？

Answer 1

visibility: "visible",display: "none"

这可能是自相矛盾的。当你想隐藏的时候尝试使用display:none;，当你想显示的时候使用display:block;。

很难将其与您的代码相关联，因为jQuery返回以下错误：

未找到具有选择器的元素："ul:first“

更新(格林尼治标准时间11:07)：

在这个示例中，我使用了以下额外的HTML和jQuery - check jsfiddle

HTML：

<div class="menu-tophorizontalmenu-container">
  <ul id="menu-tophorizontalmenu" class="menu">
    <li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-home menu-item-36">
      <a href="http://voteacnng.org">Homepage</a>   
      <div style="display:none;">
        <p>I am a</p>
        <p>menu item</p>
        <p>can you see?</p>
      </div>
    </li>
    // Other menu items
    <li>...</li>
  </ul>
</div>

jQuery：

$("#menu-item-36").hover(function(){
    $("#menu-item-36").find("div").attr('style', 'display:block;');
    $(this).mouseout(function(){
        $("#menu-item-36").find("div").attr('style', 'display:none;');
    });
});

我不得不使用<div />和<p />s，因为在你的CSS中有一些东西没有显示<ul />s，你应该试着使用它作为开始，但排序你的<ul>和CSS，这样你就可以用<ul>s和<li>s正确地标记它。

希望这能有所帮助。

Answer 2

对于箭头

$("#menu-tophorizontalmenu ul").closest('li').find('a').prepend('>>'); 

Answer 3

现状：

多亏了@experimentX，Arrow才能工作，多亏了@Alex Thomas，我们才有了下拉列表的解决方案。

我想通了一件事。有以下类：

.TopHorizontalMenu {
        margin: 18px auto 21px;
        overflow: hidden;
        width: 1005px;
        display: block;
    }

如果我删除overflow，将工作下拉菜单，但幻灯片将移动到页面的右上角。我想我需要另一种选择。