Hover is not working properly i can't change colors-CodePudding

I don't know why my CSS code is not working. I want to change a color of a link in a menu:

.nav-item a {
  color: #357411 !important;
  font-family: 'Encode Sans', sans-serif;
  margin-right: 30px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.nav-item a:hover {
  margin-bottom: 3px solid #ff7400;
  background: white
}

.nav-item a:visited {
  color: lightseagreen;
}

<ul >
  <li  id="home" role="tabpanel" aria-labelledby="home-tab">
    <a  aria-current="page" href="#">home</a>
  </li>
  <li >
    <a  href="#">aaa</a>
  </li>
  <li >
    <a  href="#"> bbb</a>
  </li>
  <li >
    <a  href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  ccc
                </a>
    <ul  aria-labelledby="navbarDropdownMenuLink">
      <li>
        <a  href="#"></a>
      </li>
      <li><a  href="#">ssss </a></li>
      <li><a  href="#">vvv</a></li>
    </ul>
  </li>
</ul>

CodePudding user response：

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

just move your a:visited above your a:hover. For more information on links: CSS Links - w3schools

I think you meant border instead of margin in your hover.

.nav-item a {
  color: #357411;
  font-family: 'Encode Sans', sans-serif;
  margin-right: 30px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
/*visited goes first*/
.nav-item a:visited {
  color: lightseagreen;
}
/*hover after visited*/
.nav-item a:hover {
  border-bottom: 3px solid #ff7400; /*border bottom not margin*/
  background: white
}

CodePudding user response：

Replace margin-bottom with border-bottom in .nav-item a:hover class.

.nav-item a {
  color: #357411 !important;
  font-family: 'Encode Sans', sans-serif;
  margin-right: 30px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.nav-item a:hover {
  border-bottom: 3px solid #ff7400;
  background: white
}

.nav-item a:visited {
  color: lightseagreen;
}

<ul >
  <li  id="home" role="tabpanel" aria-labelledby="home-tab">
    <a  aria-current="page" href="#">home</a>
  </li>
  <li >
    <a  href="#">aaa</a>
  </li>
  <li >
    <a  href="#"> bbb</a>
  </li>
  <li >
    <a  href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  ccc
                </a>
    <ul  aria-labelledby="navbarDropdownMenuLink">
      <li>
        <a  href="#"></a>
      </li>
      <li><a  href="#">ssss </a></li>
      <li><a  href="#">vvv</a></li>
    </ul>
  </li>
</ul>

CodePudding user response：

Change to this:

.nav-item a:hover {
    margin-bottom: 3px solid #ff7400;
    background-color: white;
}

The background property is wrong, you should use background color.