2013-03-15 117 views
1

我已經創建了無數的jQuery下拉菜單的過去,大部分時間都有一點點的試驗和錯誤,但這次無論我改變內容菜單保持可見。任何幫助將不勝感激。使下拉菜單保持隱形狀態,直到懸停在

這裏是我的html:

<nav> 
     <ul> 
      <li>Content Management (CMS) 
       <ul> 
        <li><a class="a1" href="#">Catalog</a></li> 
        <li><a class="a1" href="#">Images</a></li> 
       </ul> 
      </li> 
      <li>Developer 
       <ul> 
        <li><a class="a1" href="#">Pages</a></li> 
        <li><a class="a1" href="#">Static Blocks</a></li> 
       </ul> 
      </li> 
      <li>Tools 
       <ul> 
        <li><a class="a1" href="#">Analytics <i>BETA</i></a></li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 

CSS:

nav {position:absolute; margin-top:-20px;} 
nav ul{text-align:left; list-style-type:none; } 
nav ul li {float:left; background:#FFF; width:250px;} 
nav ul li:hover {background:#FFF; border:2px solid #b1953a;} 
nav ul li a {display:block; width:200px; font-size:14px;} 
nav ul li ul {position:absolute; width:50px; padding:2px;} 
nav ul li ul li{background:#FFF; border-left:2px solid #ccc; padding:5px;} 

和jQuery:

$('nav li ul').hide(); 
$('nav li').hover(
    function() { 
    $('ul', this).stop().slideDown(100); 
    },function() { 
    $('ul', this).stop().slideUp(100); 
    }); 
+3

似乎爲我工作的罰款。 http://jsfiddle.net/6fyA4/ – JJJ 2013-03-15 15:13:34

+1

在附註中,您可能想要使用'.stop(true,true)' – Terry 2013-03-15 15:14:11

+0

在Chrome/Linux上,JSfiddle也適用於我!而且,那個jQuery代碼似乎很難弄錯! :) – 2013-03-15 15:15:46

回答

1

$('nav li ul').hide();在CSS nav ul li ul {display:none;}

而且,你錯過了那個jQuery選擇器中的'ul'標籤。

工作對我來說:http://jsfiddle.net/4kqRv/


實際上,你可以做下拉的CSS真的。

nav ul li:hover ul {display:block;} 

不會像不錯,但工作原理:http://jsfiddle.net/WRGJS/

+0

這就是它現在完美工作。謝謝 – 2013-03-15 15:30:30

相關問題