CSS菜单 - 保持父键在焦点在子菜单上 [英] CSS Menu - Keep parent hovered while focus on submenu

问题描述

我查看了其他几个答案，例如 here 和here ，但是我无法弄清楚。

这是一个解释我想要完成的视频： http://screencast.com/t/Bhfj6mtZkPZp

以下是导航代码：

  .primary-navigation {
 max-width：1192px; 
 margin：20px 0px 52px 1px; 
} 
 
 .primary-navigation ul {
 font-family：'Josefin Sans'，sans-serif; 
 font-size：18px; 
 font-size：1.125rem; 
 font-weight：bold; 
 margin：0; 
 padding：0; 
 list-style：none; 
} 
 
 .primary-navigation ul li {
 display：block; 
 position：relative; 
 float：left; 
} 
 
 .primary-navigation li ul {
 display：none; 
} 
 
 .primary-navigation ul li a {
 display：block; 
 text-decoration：none; 
 color：#fff; 
背景：＃ec6397; 
 padding：12px 22px 17px 22px; 
 white-space：nowrap; 
 -moz-transition：全部0.25s缓和; 
 -webkit-transition：所有0.25s缓和; 
过渡：所有0.25s缓和; 
 border-right：1px solid＃f39cbd; 
} 
 
 .primary-navigation ul li a：hover {
 background：＃f39cbd; 
} 
 
 .primary-navigation li：hover ul {
 display：block; 
 position：absolute; 
 border-top：1px solid＃f39cbd; 
 border-left：1px solid＃f39cbd; 
} 
 
 .primary-navigation li：hover li {
 float：none; 
 width：300px; 
 z-index：3; 
 border-bottom：1px solid＃f39cbd; 
} 
 
 .primary-navigation li：hover a {
 background：＃ec6397; 
} 
 
 .primary-navigation li：hover li a：hover {
 background：＃f39cbd; 
颜色：＃000; 
} 
  

解决方案

你可以改变这个

  .primary-navigation ul li a：hover {
 background：＃f39cbd; 
} 
  

到此

  .primary-navigation ul li：hover a {
 background：＃f39cbd; 
} 
  

这样，当您将主导航项目的颜色悬停在父母李由于子菜单也应该在这个里面，所以当移动到子菜单上时，悬停仍然会被触发，所以链接的颜色也应该保持它的悬停状态。

I would like to keep the parent hover color the same when navigating the secondary menu.

I looked at a few other answers such as here and here, but I was unable to figure it out.

Here is a video explaining what I would like to accomplish: http://screencast.com/t/Bhfj6mtZkPZp

Here is the navigation code:

.primary-navigation {
    max-width: 1192px;
    margin: 20px 0px 52px 1px;
}

.primary-navigation ul {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-navigation ul li {
    display: block;
    position: relative;
    float: left;
}

.primary-navigation li ul {
    display: none;
}

.primary-navigation ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    background: #ec6397;
    padding: 12px 22px 17px 22px;
    white-space: nowrap;
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    border-right: 1px solid #f39cbd;
}

.primary-navigation ul li a:hover { 
    background: #f39cbd;
}

.primary-navigation li:hover ul {
    display: block;
    position: absolute;
    border-top: 1px solid #f39cbd;
    border-left: 1px solid #f39cbd;
}

.primary-navigation li:hover li {
    float: none;
    width: 300px;
    z-index: 3;
    border-bottom: 1px solid #f39cbd;
}

.primary-navigation li:hover a {
    background: #ec6397;
}

.primary-navigation li:hover li a:hover {
    background: #f39cbd;
    color: #000;
}

解决方案

You hould be able to change this

.primary-navigation ul li a:hover { 
    background: #f39cbd;
}

to this

.primary-navigation ul li:hover a { 
    background: #f39cbd;
}

This way the color of your main nav item is changed when you hover over the parent li. Since the submenu should also be inside this li, the hover will still be triggered when moving over the submenu, an so the color of the link should also keep it's hover state.

这篇关于CSS菜单 - 保持父键在焦点在子菜单上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！