Question

我正在使用此网络WebSite中的菜单，但我遇到了问题。

我需要在悬停主菜单时，将此标记“a”添加到其他颜色。

html代码：

<ul id="menu-main-menu" class="menu">
    <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a href="http://jesusbwebdesigner.com/staging_sdv/">Home</a></li> 
    <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-160"><a href="http://jesusbwebdesigner.com/staging_sdv/historia/">Quiénes Somos</a>
        <ul class="sub-menu">
            <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://jesusbwebdesigner.com/staging_sdv/historia/">Historia</a></li>
            <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://jesusbwebdesigner.com/staging_sdv/mision/">Misión</a></li>
            <li id="menu-item-163" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163"><a href="http://jesusbwebdesigner.com/staging_sdv/vision/">Visión</a></li>
            <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://jesusbwebdesigner.com/staging_sdv/sistema-integrado-gestion/">Sistema Integrado Gestión</a></li>
            <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://jesusbwebdesigner.com/staging_sdv/politicas/">Políticas de Gestión</a></li>
        </ul>
    </li>
<ul>

这是我的css代码，但没有工作：

.mainMenu .menu li.menu-item:hover + a{
    color: red !important;
}

请帮助。

Answer 1

这是执行此操作的正确方法：

.mainMenu .menu li.menu-item > a:hover {
    color: red;
}

如果你只想在子菜单中设置链接的样式，那么执行以下操作：

.mainMenu .menu li.menu-item ul li a:hover {
    color: red;
}

如果你想悬停li：

.mainMenu .menu > li.menu-item:hover > a {
    color: red;
}

悬停主菜单li + a

1 个答案: