Question

我想在页面加载时让悬停下拉菜单显示下来。我目前正在使用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;

目前，下拉工作完美，但我希望“项目”下拉列表在加载“项目”页面时显示为向下，但当鼠标悬停在“信息”上时，此项将消失，并且加载“信息”页面时，“信息”下拉菜单也会发生相同的情况。任何帮助都会很棒！感谢

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

Answer 2

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

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

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

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

触发悬停下拉菜单onload

2 个答案: