How can I have a vertical nav bar link move left when hovered over?-CodePudding

I've been playing around with CSS and creating nav bars. I'm trying to create an effect where the selected link in the nav bar will move our slightly to the left when hovered to indicate selection. I'm not too sure where I'm going wrong, but I think it's safe to assume there's probably a few places since this is my first attempt at putting learning into practice.

I think where I'm going wrong is with the display or positioning properties, or possibly a conflict?

I tried playing with different display and positioning properties, but I'd like the nav bar to stick to its location whilst scrolling so as far as I know it would need to remain sticky. I tried changing padding and margin too.

At current when hovered over, instead of the one link hovered over moving, all others move, and strangely some move differently to others. Any suggestions or help would be greatly appreciated :)

HTML:

    <div >
        <nav>
            <ul>
                <li ><a href="#"><span >01.</span> About</a></li>
                <li ><a href="#"><span >02.</span> Experience</a></li>
                <li ><a href="#"><span >03.</span> Work</a></li>
                <li ><a href="#"><span >04.</span> Contact</a></li>
            </ul>
        </nav>
    </div>

CSS

.nav-container {
    display: flex;
    position: sticky;
    float: right;
    margin-right: 6rem;
    line-height: 5rem;
    list-style: none;
    border-right: 1px grey solid;
    padding-right: 1.5rem;
}
.nav-container ul, a{
    list-style: none;
    text-decoration: none;
    font-family: menlo;
    font-size: 0.7rem;
    color: #CCD6F6;
}
.nav-num {
    color: #6683FC;
}
.nav-button:hover{
    padding-left: 50px;
    transition: 1s linear;

}

CodePudding user response：

I'd recommend using transform: translateX to move elements instead of adjusting padding:

.nav-container {
  display: flex;
  position: sticky;
  float: right;
  margin-right: 6rem;
  line-height: 5rem;
  list-style: none;
  border-right: 1px grey solid;
  padding-right: 1.5rem;
}

.nav-container ul,
a {
  list-style: none;
  text-decoration: none;
  font-family: menlo;
  font-size: 0.7rem;
  color: #CCD6F6;
}

.nav-num {
  color: #6683FC;
}

.nav-button {
  transition: 0.1s ease;
}

.nav-button:hover {
  transform: translateX(10px);
}

<div >
  <nav>
    <ul>
      <li ><a href="#"><span >01.</span> About</a></li>
      <li ><a href="#"><span >02.</span> Experience</a></li>
      <li ><a href="#"><span >03.</span> Work</a></li>
      <li ><a href="#"><span >04.</span> Contact</a></li>
    </ul>
  </nav>
</div>