CSS悬停在课堂上不工作

Question

我正在尝试将li悬停在上方时过渡，但是悬停似乎被忽略并且什么也没有发生。 如果我改用'nav ul：hover'，它可以工作，但是栏会在所有li的下面弹出。

<nav>
  <ul>
    <li class="nav-li">All Departments</li>
    <li class="nav-li">Shop by Room</li>
    <li class="nav-li">DIY Projects & Ideas</li>
    <li class="nav-li">Home Services</li>
    <li class="nav-li">Speacials & Offers</li>
    <li class="nav-li">Local Ad</li>
  </ul>
</nav>

CSS

.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}

.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}

.nav-li:hover .nav-li::after {
background-color: #f96302;
width: 100%;
}

Answer 1

.nav-li:hover .nav-li::after应该是.nav-li:hover::after

 .nav-li { margin-right: 40px; display: inline-block; padding-bottom: 2em; transition: all .5s ease; cursor: pointer; position: relative; } .nav-li::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; transition: width .5s ease; } .nav-li:hover::after { background-color: #f96302; width: 100%; } 

 <nav> <ul> <li class="nav-li">All Departments</li> <li class="nav-li">Shop by Room</li> <li class="nav-li">DIY Projects & Ideas</li> <li class="nav-li">Home Services</li> <li class="nav-li">Speacials & Offers</li> <li class="nav-li">Local Ad</li> </ul> </nav> 

Answer 2

尝试结合两者。

.nav-li:hover::after

示例： https ： //jsfiddle.net/pc26LnLz/1/