触发悬停下拉菜单 onload答案

【问题标题】：Trigger hover drop down menu onload触发悬停下拉菜单 onload
【发布时间】：2014-01-21 15:59:12
【问题描述】：

我想让一个悬停下拉菜单在页面加载时出现。我目前正在使用 CSS 和 HTML 使菜单在悬停时下拉，但希望菜单在加载该下拉菜单中的页面时出现，但当鼠标悬停在不同的下拉菜单上时会消失。

这是我目前的 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;

目前，下拉菜单完美运行，但我希望在加载“项目”页面时出现“项目”下拉菜单，但是当鼠标悬停在“信息”上时它会消失，并且加载“信息”页面时，“信息”下拉菜单也会发生同样的情况。任何帮助都会很棒！谢谢

【问题讨论】：

你需要一些 jQuery 来添加一个类到你想要显示的下拉列表中。
你可以使用 CSS 来实现这一点。

标签： html css drop-down-menu menu hover

【解决方案1】：

@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');    
        });    
    });
});

【讨论】：

【解决方案2】：

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

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

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

这对我有用：http://jsfiddle.net/k9bTE/

【讨论】：