CSS：悬停以影响2个元素-CSS:hovertoaffect2elements

So I have some CSS generating this.

所以我有一些CSS生成这个。

The HTML code as follows.

HTML代码如下。

                

                
Home
                

                
About Us
                

                
Order Online
                

                
Gallery
                

                
Contact Us
                

                
            

And the CSS

和CSS

.menu {
    width: 100%;
    height: 220px;
    float: left;
    margin-left: -20px;
    position: relative;
    text-align: center;
}

.menu li{
    display: block;
    list-style: none;
    width: 100%;
    background: #EBE5D9;
    height: 50px;
    margin-left: -40px;
    margin-top: 5px;
    line-height: 50px;
}

.menu li:hover {
    background: #AEC32A;
}


.menu li a{
    text-decoration: none;
    font-size: 20px;
    color: #000000;
    font-family: fantasy;
}



.menutab {
    width: 30px;
    position: relative;
    margin-top: -3px;
    margin-left: -71px;
    border-right: 21px solid #EBE5D9;
    border-bottom: 21px solid transparent;
}

Basically what I am wanting is for the hover effect to turn the whole thing green, currently .menu li:hover turns the block the colour #AEC32A but I also want it to turn the .menutab border the same colour, anyway of doing this? preferably without using Javascript.

基本上我想要的是悬停效果将整个事物变成绿色,目前.menu li:hover将块变为#AEC32A但是我也希望它将.menutab边框变成相同的颜色,无论如何这样做?最好不要使用Javascript。

Thanks in advance for your help :-)

在此先感谢您的帮助 :-)

2 个解决方案

.menu li:hover + .menutab{
    border-right-color: #AEC32A;
}

.menu li:hover+.menutab {
    border-right-color: #AEC32A;
}