多級下拉菜單，下拉問題

問題出在下拉菜單中。這是一個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();});

的另一個問題是箭......箭頭需要展現出來，其中一個孩子的菜單是存在的。

任何想法？

來源

2011-02-25 Grávuj Miklós Henrich

我認爲這是工作只是懸停在遇到你的候選人 – 2011-02-25 09:37:25

visibility: "visible",display: "none"

這可能是自相矛盾的。嘗試僅在想要隱藏時使用display:none;，而在要顯示時嘗試使用display:block;。

很難將之與您的代碼作爲jQuery的返回以下錯誤：

No elements were found with the selector: "ul:first"

更新（@ 11：07 GMT）：

我用下面的多餘的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那不是出·您應該嘗試使用這個作爲一個開始，但理清你的HTML和CSS因此您可以使用<ul> s和<li> s正確標記它。

希望這會有所幫助。

來源

2011-02-25 09:34:16 Alex

非常感謝你的答案。我一定會嘗試你的建議。 – 2011-02-25 09:47:59

感謝您花時間給我答案。我做了你提出的改變，但沒有成功。 – 2011-02-25 10:44:48

嗨@洪，請查看我的答案更新。這是您前進的起點。 – Alex 2011-02-25 11:13:10

對於箭頭

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

來源

2011-02-25 09:42:43

感謝您花時間給我答案。我添加了代碼行，但沒有成功。 – 2011-02-25 10:41:38

@Hun不是滑動工作，我認爲它只是在'滿足你的候選'菜單上工作，當然，它下降 – 2011-02-25 10:59:31

不，幻燈片工作正常。沒有問題。子菜單隻能與@Alex Thomas在上述討論中提供的解決方案一起使用。爲此，如果這仍然是唯一的解決方案，我將需要在生成菜單結構的WordPress文件中進行更改。在此之前，我添加了你的線，現在出現了箭頭。請參閱我的描述中的鏈接。非常感謝。另一個棘手的事情是，一個自己寫了CSS，我今天才意識到，「二十」默認的WordPress主題支持多級下拉菜單。多麼傷心，我:)）） – 2011-02-25 12:16:17

現狀：

箭頭的作品得益於@experimentX，我們有感謝@Alex托馬斯下拉菜單的解決方案。

我想出了一件事。有以下類：

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

如果我刪除overflow，將工作的下拉菜單，但幻燈片將移動到頁面頂部的右側。我想爲此我需要替代方案。

來源

2011-02-25 12:55:19

多級下拉菜單，下拉問題

回答

相關問題