触发器悬停下拉菜单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

回答

相关问题