使用CSS在鼠标悬停在子菜单上时保持顶级导航悬停效果 [英] Use CSS to keep the top-level navigation hover effect on when the mouse is over the sub-menu

问题描述

当鼠标悬停导航项时，链接的颜色将更改为白色，链接的背景变为黑色。悬停状态在隐藏的嵌套上显示：块。当我将鼠标移动到嵌套（即子菜单）时，顶层导航上的悬停状态返回到原来的状态。

When you mouseover a navigation item, the colour of the link changes to white and background of that link goes black. The hover state does a display:block on a hidden nested . When I move the mouse over to the nested (i.e. the sub menu), the hover state on the top-level nav returns back to the way it was. How do I make it persist whilst my mouse is over the sub-menu?

换句话说，当我将鼠标悬停在链接我们做什么时，字体颜色改变到#fff和背景到＃111，ul.sub菜单出现相同的黑色背景和白色文本。这一切都出现，而我的鼠标悬停在我们做什么，但一旦它移动到子菜单，我们做什么的背景返回到其原来的颜色和字体颜色变回黑色。同时，我的子菜单以正确的格式保持打开。

In other words, when I hover the link 'What we do', the font color changes to #fff and background to #111 and the ul.sub-menu appears with the same black background and white text. This all appears whilst my mouse hovers over 'What we do', but as soon as it moves to the sub-menu, the background on 'What we do' returns to its original color and font color changes back to black. Meanwhile my sub-menu remains open in the correct format. How do I get the 'state' to persist when I move the mouse hover away?

这里是一个jsfiddle： http://jsfiddle.net/U77re/

Here is a jsfiddle for it: http://jsfiddle.net/U77re/

nav ul#menu-top-nav { position: absolute; top: 35px; left: 113px; padding: 16px 30px 17px 20px; width: 797px; background: #F0F1F4;}
nav ul#menu-top-nav li { position: relative; float: left; margin: 0 40px 0 0; }
nav ul#menu-top-nav li a:hover { color: #fff; background: #111;  }
nav ul#menu-top-nav li#menu-item-1186 { margin-right: 0; }
nav ul#menu-top-nav ul.sub-menu { display: none; }
nav ul#menu-top-nav ul.sub-menu li a { margin: 0; }

nav ul#menu-top-nav li:hover ul.sub-menu { display: block; position: absolute; left:0; top: 30px; width: 250px; padding: 20px;
                                    z-index: 1; background: #111; }

nav ul#menu-top-nav  ul.sub-menu p { margin: 0 0 25px 0; color: #fff; line-height: 1.4; font-weight: bold; }
nav ul#menu-top-nav  ul.sub-menu li { width: 250px; margin: 0 0 20px 20px; color: #fff; list-style-position: inside; list-style-type: disc;  }
nav ul#menu-top-nav  ul.sub-menu li a { color: #fff;  }

<nav role="navigation">
    <ul class="menu" id="menu-top-nav">
    <li id="menu-item-1596"><a href="http://localhost:8888/what-we-do/">What we do</a>
        <ul class="sub-menu">
            <p>Explore what we do and the people behind it</p>
            <li id="menu-item-1600"><a href="/what-we-do/about/">About IFSW</a></li>
            <li id="menu-item-1604"><a href="/what-we-do/partners/">Partners</a></li>
            <li id="menu-item-1601"><a href="/what-we-do/contact/">Contact</a></li>
        </ul>
    </li>
</ul>
</nav>

推荐答案

将您的悬停事件从 元素添加到元素，如下所示：

Switch your hover event from the a anchor element to the li element, like so:

nav ul#menu-top-nav li:hover a { color: #fff; background: #111;  }

这篇关于使用CSS在鼠标悬停在子菜单上时保持顶级导航悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！