why li hover fade in (out in only second one)

Question

User-1045082127 posted

according to the title why my code work for only second one:

      <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#"><img src="Img/Logo.jpg" id="logo" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <div class="mr-auto"></div>
          <ul class="navbar-nav">
            <li class="nav-item active menu">
              <a class="nav-link font-Byekan" href="#">صــفحه اصــلی</a>
            </li>
            <li class="nav-item menu">----------------------------------> this is second one
              <a class="nav-link font-Byekan" href="#">مقــالات</a>
            </li>
            <li class="nav-item menu">
              <a class="nav-link font-Byekan" href="#">نــمونه کارهــا</a>
            </li>
            <li class="nav-item menu">
              <a class="nav-link font-Byekan" href="#">درباره مــا</a>
            </li>
          </ul>
          <div class="ml-auto"></div>
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fab fa-instagram social"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fab fa-twitter social"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fab fa-google-plus-g social"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fab fa-linkedin-in social"></i></a>
            </li>
          </ul>
        </div>
      </nav>

.menu::before
{
  background:  #dad410;
  content: "";
  ;
  top:50%;
  left: 50%;
  transform:  translate(-50%,-50%);
  z-index:-1;
  transition: all 0.3s ease;

}
.menu::before{
  width: 0;
  height: 100px;
}
.menu:hover::before
{

  width: 100px;
}

Answer 1

User415553908 posted

do you mind elaborating a bit more in what is the current/expected behaviour?
what other CSS libraries have you got included? (I will assume you've got Bootstrap for now) 

ideally - if you could create a *minimal* example of the issue in codepen (or jsfiddle or any other service)

Answer 2

User-1045082127 posted

I was selected نمونه کارها but مقالات is selected

Show Image On Google Drive

Answer 3

User415553908 posted

Oh, I think the issue is your yellow blob is absolutely positioned.

try changing display property of parent element:

.menu {
  ;
}

this should set location context for your absolutely positioned highlight.

read more about this positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position