觸發器懸停下拉菜單onload

我想讓懸停下拉菜單在頁面加載時顯示下來。我目前使用CSS和HTML來使菜單在懸停時下拉菜單，但希望菜單在下拉菜單中的頁面加載時出現，但當鼠標懸停在不同的下拉菜單上時，則會消失。觸發器懸停下拉菜單onload

這是我此刻的HTML：

  <ul id="nav"> 
<li><a href="#">Projects</a> 
    <ul> 
    </br> 
     <li><a href="#">Project 1</a></li> 
     <li><a href="#">Project 2</a></li> 
     <li><a href="#">Project 3</a></li> 
     <li><a href="#">Project 4</a></li> 
     </li> 
    </ul> 
</li> 

<li><a href="#">Info</a> 
    <ul> 
    </br> 
     <li><a href="#">Info 1</a></li> 
     <li><a href="#">Info 2</a></li> 
     <li><a href="#">Info 3</a></li> 
     <li><a href="#">Info 4</a></li> 
    </ul> 
</li> 
</ul>

我的CSS：

#nav, #nav ul { 
padding: 0; 
margin: 0; 
list-style: none; 
text-align:left; 
} 

#nav a { 
display: block; 
text-align:left; 
} 

#nav li { 
float: left; 
padding-right:3.5px; 
text-align:left; 
} 

#nav li ul { 
position: absolute; 
width: 10em; 
visibility: hidden; 
text-align:left; 
} 

#nav li:hover ul { 
visibility: visible; 
text-align:left;

目前，下拉完美的作品，但我想「項目」下拉到加載「項目」頁面時會出現下滑，但當鼠標懸停在「信息」上時會消失，而當加載「信息」頁面時，「信息」下拉會發生同樣的情況。任何幫助將是偉大的！由於

來源

2014-01-21 user2798841

你需要一些這裏的jQuery的類添加到下拉你想成爲可見的。 – otinanai

你可以使用CSS來做到這一點。 –

@otinanai是正確

這裏的例子：

http://jsfiddle.net/gHe4K/

HTML：

<ul id="nav"> 
<li class="hovered"><a href="#">Projects</a> 
...

CSS：

#nav li ul { 
position: absolute; 
width: 10em; 
visibility: hidden; 
text-align:left; 
} 

#nav li.hovered ul{ 
visibility: visible; 
text-align:left;

JS：

$(document).ready(function() { 
    $('ul#nav li').each(function() { 
     $(this).on('mouseenter', function(){ 
      $(this).addClass('hovered');  
     }); 
     $(this).on('mouseleave', function(){ 
      $(this).removeClass('hovered');  
     });  
    }); 
});

來源

2014-01-21 16:12:01 LorDex

#nav li.current ul { 
    visibility: visible; 
} 

#nav:hover li ul { 
    visibility: hidden; 
} 

#nav li:hover ul { 
    visibility: visible; 
}

這個工作對我來說：http://jsfiddle.net/k9bTE/

來源

2014-01-21 16:23:59 Tschitsch

觸發器懸停下拉菜單onload

回答

相關問題