当鼠标悬停在子菜单上时，使用CSS保持顶级导航悬停效果

当您将鼠标悬停在导航项目上时，链接的颜色变为白色，并且该链接的背景变为黑色。悬停状态在隐藏的嵌套区域上执行display：block。当我将鼠标移动到嵌套（即子菜单）时，顶级导航栏上的悬停状态将返回到原来的状态。我的鼠标悬停在子菜单上时如何保持它？当鼠标悬停在子菜单上时，使用CSS保持顶级导航悬停效果

换句话说，当我将链接'我们做什么'悬停时，字体颜色更改为#fff，背景更改为＃111，并且ul.sub-菜单显示为具有相同的黑色背景和白色文本。这一切都出现在我的鼠标悬停在'我们做什么'上，但是一旦它移动到子菜单，'我们做什么'的背景就会返回到原来的颜色，字体颜色会变回黑色。同时我的子菜单仍然以正确的格式打开。当我将鼠标悬停时，如何让“状态”保持不变？

这里是它的jsfiddle：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>

来源

2012-02-25 spike5792

我编辑你的问题添加的jsfiddle为你。 – 2012-02-25 03:13:05

从a锚元件开关你的悬停事件的li元素，像这样：

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

来源

2012-02-25 03:12:22

谢谢，这个工作，当我看着它很明显。我想我迷失在这个地区。 – spike5792 2012-02-25 09:59:32

谢谢你，为我工作。 – 2013-04-09 19:52:07

当鼠标悬停在子菜单上时，使用CSS保持顶级导航悬停效果

回答

相关问题