First, make sure you add your closing brackets at the end of each CSS declaration.

Convert your <a> tags to spans, and keep the nav content in them.

Move the link to the left of the span and give it a new class. You can then position it to overlay the nav item, and make it the width of the whole transition. Style it so that the background is transparent.

Lastly, edit the hover CSS, making it so that when you hover on the overlay, it activates the transition.

/* OVERLAYS */

.overlay-one {
  position: absolute;
  background-color: transparent;
  top: 50%;
  margin-top: -55px;
  height: 50px;
  width: 150px;
  z-index: 1000000;
}

.overlay-two {
  position: absolute;
  background-color: transparent;
  top: 50%;
  margin-top: 15px;
  height: 50px;
  width: 150px;
  z-index: 1000000;
}


/***********/

.nav {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  font-size: 50px;
  letter-spacing: 5px;
  z-index: 20;
  color: white;
  float: right;
  direction: rtl;
  top: 50%;
  right: 100px;
  margin-top: -120px;
}

.nav1 {
  text-decoration: none;
  position: relative;
  color: #43A3E8;
  left: 0;
  transition: left ease 0.5s;
}


/* HOVER CODE */

.overlay-one:hover+.nav1 {
  left: -35px;
}

.nav2 {
  text-decoration: none;
  position: relative;
  color: #C944F5;
  left: 0;
  transition: left ease 0.5s;
}

.overlay-two:hover+.nav2 {
  left: -35px;
}

<div class="nav">
  <a href="2d.html" class="overlay-one"></a><span class="nav1">2D</span>
  <br>
  <a href="3d.html" class="overlay-two"></a><span class="nav2">3D</span>
</div>

I have an issue regarding the :hover in CSS.

This is my HTML Code for a navigation menu:

<div class="nav">
    <a href="2d.html" class="nav1">2D</a>
    <br>
    <a href="3d.html" class="nav2">3D</a>
</div>

This is the CSS Code:

.nav {
position: absolute;
font-family: 'Oswald', sans-serif;
font-weight: 900;
font-size: 50px;
letter-spacing: 5px;
z-index: 20;
color: white;
float: right;
direction: rtl;
top: 50%;
right: 100px;
margin-top: -120px;

.nav1 {
text-decoration: none;
position: relative;
color: #43A3E8;
left: 0;
transition: left ease 0.5s;

.nav1:hover{
left: -35px;

.nav2 {
text-decoration: none;
position: relative;
color: #C944F5;
left: 0;
transition: left ease 0.5s;

.nav2:hover{
left: -35px;

Now the “2D” and “3D” texts are twitching when the cursor is in a wrong position (half on the text and half on an empty spot). I know that’s a common issue and I’ve googled it but I can’t applicate it to my code…

It would be amazing if someone could help me out there!

Thank you!