多級下拉菜單，下拉列表問題

Question

菜單在這里： http ： //voteacnng.org

問題在於下拉列表。 這是一個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 - 檢查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 ，將工作下拉列表，但幻燈片將移動到頁面的右上方。 我想為此我需要替代方案。