Question

问题在于下拉列表。这是一个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 />，因为您的CSS中有些内容未显示<ul /> s您应该尝试将此作为一个开头但要整理出来您的HTML和CSS，以便您可以使用<ul>和<li>来正确标记。

希望这有帮助。

Answer 2

对于箭头

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

Answer 3

现状：

Arrows的工作得益于@experimentX，感谢@Alex Thomas提供下拉列表的解决方案。

我发现了一件事。有以下课程：

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

如果我删除了overflow，则可以使用下拉列表，但幻灯片显示会移动到页面的右上角。我认为我需要替代方案。

多级下拉菜单，下拉列表问题

3 个答案: