将鼠标悬停在子菜单上后，为父菜单项设置不同的颜色

Question

我有一个菜单，其子菜单只使用CSS和HTML。

我试图使主菜单中得到一些的颜色，当鼠标移动到它..

并保持这种变化，而鼠标在子菜单..

所有我现在能做的就是设置相同的颜色OS子..

这里是我想要做的事：

我的代码：

HTML：

<ul id="nav"> 

    <li><a href="#">Home</a></li> 

    <li> 
     <a href="#">Institucional</a> 
     <ul> 
     <li><a href="#">Nonononono</a></li> 
     <li><a href="#">Nonononono</a></li></li> 
     <li><a href="#">Nonononono</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

#nav{ 
    list-style:none; 
    font-weight:bold; 
    float:right; 
    width:100%; 
    font-size:13px; 
} 

#nav li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
    text-align:left; 
} 

#nav a{ 
    display:block; 
    padding:5px; 
    color:#666; 
    text-decoration:none; 
    //background:white; 
} 
#nav a:hover{ 
    color:yellow; 
    text-decoration:none; 
    background:#D93600; 
} 

#nav ul{ 
    //border:1px solid black; 
    border-top:0; 
    border-right:0; 
    background:#D93600; 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
    -webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75); 
    box-shadow:   3px 3px 3px 0px rgba(50, 50, 50, 0.75); 
} 
#nav ul li{ 
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */ 
    float:none; 
    border-bottom:1px solid #FF7040; 
    margin-right:0px; 
} 
#nav ul a{ 
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */ 
    text-decoration:none; 
} 
#nav li:hover ul{ /* Display the dropdown on hover */ 
    left:0; /* Bring back on-screen when needed */ 
} 
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ 
    //background:#D93600; 
    text-decoration:none; 
} 
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */ 
    text-decoration:none; 
    color:white; 
    font-weight:normal; 
    font-size:12px; 
} 
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */ 
    background:#FFBE13; 
    text-decoration:none; 
    color:black; 
} 

Answer 1

就申请正式li元素:hover效果

#nav > li:hover { 
 
    background-color: #D93600; 
 
    color: yellow; 
 
} 
 
#nav > li:hover a { 
 
    color: yellow; 
 
} 
 
/* rest of code */ 
 

 
#nav { 
 
    list-style: none; 
 
    font-weight: bold; 
 
    float: right; 
 
    width: 100%; 
 
    font-size: 13px; 
 
} 
 
#nav li { 
 
    float: left; 
 
    margin-right: 10px; 
 
    position: relative; 
 
    text-align: left; 
 
} 
 
#nav a { 
 
    display: block; 
 
    padding: 5px; 
 
    color: #666; 
 
    text-decoration: none; 
 
    //background:white; 
 

 
} 
 
#nav a:hover { 
 
    color: yellow; 
 
    text-decoration: none; 
 
    background: #D93600; 
 
} 
 
#nav ul { 
 
    //border:1px solid black; 
 
    border-top: 0; 
 
    border-right: 0; 
 
    background: #D93600; 
 
    list-style: none; 
 
    position: absolute; 
 
    left: -9999px; 
 
    -webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75); 
 
    -moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75); 
 
} 
 
#nav ul li { 
 
    padding-top: 1px; 
 
    /* Introducing a padding between the li and the a give the illusion spaced items */ 
 
    float: none; 
 
    border-bottom: 1px solid #FF7040; 
 
    margin-right: 0px; 
 
} 
 
#nav ul a { 
 
    white-space: nowrap; 
 
    /* Stop text wrapping and creating multi-line dropdown items */ 
 
    text-decoration: none; 
 
} 
 
#nav li:hover ul { 
 
    /* Display the dropdown on hover */ 
 
    left: 0; 
 
    /* Bring back on-screen when needed */ 
 
} 
 
#nav li:hover a { 
 
    /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ 
 
    //background:#D93600; 
 
    text-decoration: none; 
 
} 
 
#nav li:hover ul a { 
 
    /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */ 
 
    text-decoration: none; 
 
    color: white; 
 
    font-weight: normal; 
 
    font-size: 12px; 
 
} 
 
#nav li:hover ul li a:hover { 
 
    /* Here we define the most explicit hover states--what happens when you hover each individual link. */ 
 
    background: #FFBE13; 
 
    text-decoration: none; 
 
    color: black; 
 
}

<ul id="nav"> 
 

 
    <li><a href="#">Home</a> 
 
    </li> 
 

 
    <li> 
 
    <a href="#">Institucional</a> 
 
    <ul> 
 
     <li><a href="#">Sobre o CCOCF</a> 
 
     </li> 
 
     <li><a href="#">Assosiação de Amigos do CCOCF</a> 
 
     </li> 
 
    </li> 
 
    <li><a href="#">Projetos da Casa</a> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

使悬停时高亮父级菜单应该写下面的CSS规则。

#nav li:hover { 
    background:#f00; 
} 

为了让你应该写父菜单文本白色下面的代码

#menu li:hover a { 
    color:#ffff; 
} 

，如果你想检查上面的代码，请检查此琴：https://jsfiddle.net/g5jL7xs1/

Answer 3

试试这个Demo，设置好的颜色父母，如果它是活跃的。

$('#nav ul li').hover(
    function() {  
     $(this).parents('li').addClass('subColor'); 
    },  
    function() { 
     $(this).parents('li').removeClass('subColor'); 
    }   
); 

Answer 4

试试这个它很简单

<ul id="nav"> 
    <li class="primary"><a href="#">Home</a></li> 
    <li class="primary"> 
     <a href="#">Institucional</a> 
     <ul> 
     <li><a href="#">Nonononono</a></li> 
     <li><a href="#">Nonononono</a></li> 
     <li><a href="#">Nonononono</a></li> 
     </ul> 
    </li> 
</ul> 

    #nav .primary:hover a { 
    color: #FFBE13; 
    background: #D93600; 
    } 

只是上面的类添加到Li和CSS的两行