更改ul :: before選擇器時懸停李：第一個孩子

我有一個問題。我想在子菜單中的第一個li元素懸停時將de :: after顏色（＃406394）更改爲（＃557EB7）。有人能幫我嗎？更改ul :: before選擇器時懸停李：第一個孩子

::之後和子菜單中的第一個子元素li元素應該看起來只有一個元素。

.menu ul { 
    padding: 0 !important; 
    margin: 0 !important; 
    width: 200px; 
} 
.menu li { 
    display: block; 
    list-style: none; 
    min-height: 30px; 
    background: #406394; 
    border-bottom: 4px solid #557EB7; 
    text-align: center; 
    color: #fff; 
    font-size: 16px; 
} 
.menu li a { 
    display: block; 
    color: #FFF; 
    padding: 9px 0; 
    text-decoration: none; 
    transition: all 0.25s ease; 
    -moz-transition: all 0.25s ease; 
    -ms-transition: all 0.25s ease; 
    -o-transition: all 0.25s ease; 
    -webkit-transition: all 0.25s ease; 
} 
.menu li a:hover { 
    display: block; 
    background: #557EB7; 
} 
.menu li i { 
    position: relative; 
    right: 10px; 
    font-size: 14px; 
    font-weight: 100; 
    float: right; 
} 
.menu li a i.glyphicon { 
    transition: ease 0.3s; 
} 
.menu li a:hover i.glyphicon { 
    transform: rotate(540deg); 
    -webkit-transform: rotate(540deg); 
    -moz-transform: rotate(540deg); 
    -o-transform: rotate(540deg); 
} 
.dropdown-menu { 
    top: 44px !important; 
    left: 219px !important; 
    margin: 0 !important; 
    background-color: #406394 !important; 
    color: #FFF !important; 
    padding: 0 !important; 
    transition: 0.6s ease-in-out left; 
    -webkit-transition: 0.6s ease-in-out left; 
} 
.open > .dropdown-menu { 
    left: 233px !important; 
    transition: 0.6s ease-in-out left; 
    -webkit-transition: 0.6s ease-in-out left; 
} 
.dropdown-menu li:last-child { 
    border: none !important; 
} 
.dropdown-menu > li > a { 
    padding: 6px 20px !important; 
    color: #fff !important; 
} 
.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus { 
    color: #fff !important; 
    background-color: #557EB7 !important; 
} 
.dropdown-menu::after { 
    z-index: -1; 
    position: absolute; 
    top: 16px; 
    left: -10px; 
    margin-top: -10px; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid #406394; 
    transition: 0.6s ease-in-out all; 
    -webkit-transition: 0.6s ease-in-out all; 
} 
.dropdown:hover > .dropdown-menu { 
    display: block !important; 
} 
.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 160px; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, .15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="menu"> 
    <ul> 
    <li><a href="#">Inicio</a> 
    </li> 
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Empresa <i class="glyphicon glyphicon-chevron-right"></i></a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Quienes Somos</a> 
     </li> 
     <li><a href="#">Mision</a> 
     </li> 
     <li><a href="#">Vision</a> 
     </li> 
     <li><a href="#">Políticas de calidad</a> 
     </li> 
     <li><a href="#">Instalaciones</a> 
     </li> 
     <li><a href="#">Equipo de Trabajo</a> 
     </li> 
     <li><a href="#">Instrumentos</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div>

來源

2014-10-07 bob1234

你不能做到這一點用css因爲CSS不能去向上目標先看li元素。您將不得不使用javascript – Dionys 2014-10-07 07:17:08

-1

可以使用.dropdown-menu li:first-of-type:hover

來源

2014-10-07 07:16:50 X287

這與問題實際上有何關係？ – 2014-10-07 07:18:56

更改ul :: before選擇器時懸停李：第一個孩子

回答

相關問題