CSS如何在悬停时更改3行（菜单图标）颜色

Question

我创建了一个下拉菜单并添加了菜单图标，让用户知道这是可点击的。但是，当我将鼠标悬停在菜单图标上时，颜色不会变为我想要的颜色。我试过.box-shadow-menu:hover但没有任何事情发生。

在HTML中

    <ul class="navigation"> 
    <a style="padding-left:33px;" class="main" href="#url">
    The Smile<b class="box-shadow-menu"></b>

    </a>

    <li class="n"><a style="padding-left:30px;" href="#">One</a>
    </li>
    <li><a style="padding-left:30px;" href="#">Two</a>
    </li>
    <li class="n"><a style="padding-left:30px;" href="#">Three</a>
    </li>
</ul>

菜单图标CSS

.box-shadow-menu {
    position: relative;
    margin-left: 15px;
}
.box-shadow-menu:before {
    content:"";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1em;
    height: 0.15em;
    background: #1ABC9C;
    box-shadow: 0 0.25em 0 0 #1ABC9C, 0 0.5em 0 0 #1ABC9C;
}

Here the JSFiddle

Answer 1

试试这个： -

ul.navigation:hover .box-shadow-menu:before{
     background-color:#333;
     box-shadow:0 0.25em 0 0 #333, 0 0.5em 0 0 #333;
}

<强> DEMO

Answer 2

使用您想要的颜色更改背景和框阴影

    .navigation:hover  .box-shadow-menu:before {
    background: #1ABC9C;
    box-shadow: 0 0.25em 0 0 #1ABC9C, 0 0.5em 0 0 #1ABC9C;
}