CSS 菜单 - 在关注子菜单的同时保持父级悬停 [英] CSS Menu - Keep parent hovered while focus on submenu

问题描述

我希望在导航二级菜单时保持父悬停颜色相同.

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.

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

Here is a video explaining what I would like to accomplish: 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;
    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;
}

推荐答案

你应该能够改变这个

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

到这里

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

这样，当您将鼠标悬停在父 li 上时，主导航项的颜色会发生变化.由于子菜单也应该在这个li里面，所以在子菜单上移动时仍然会触发悬停，所以链接的颜色也应该保持悬停状态.

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屋！