span tag inside li with link is moving on hover

Question

I have the following html. When I hover on the last li, a border should generate. When I hover on the last li, other li's are moving.

I have gone through these 2 questions.

1. list item width height issue
2. fixed with span inside li

I can't able to stop moving the element.

HTML:

<div class="menu_right">
  <ul class="menu">
    <li><a href="#">Text 1</a></li>
    <li><a href="#">Text 2</a></li>
    <li class="your_space"><a href="#"><span>Text3</span></a></li>
  </ul>
</div>

Kindly check my jsfiddle.

It maybe a simple issue. But I can't able to find a solution to fix it.

Answer 1

Use a transparent border on all the other <li> to make it good.

ul.menu li {
  float: left;
  list-style-type: none;
  border: 2px solid transparent;
}

Fiddle: https://jsfiddle.net/8cu4bL3s/

Answer 2

Please add border: 2px solid transparent; to all the li

.menu_right {
  float: right;
}
ul.menu li {
  float: left;
  list-style-type: none;
  border: 2px solid transparent;
}
ul.menu li a {
  text-decoration: none;
}
li.your_space {
  width: 100px;
}
li.your_space:hover {
  border: 2px solid black;
}
li.your_space a>span {
  display: block;
}

<div class="menu_right">
  <ul class="menu">
    <li><a href="#">Text 1</a>
    </li>
    <li><a href="#">Text 2</a>
    </li>
    <li class="your_space"><a href="#"><span>Text3</span></a>
    </li>
  </ul>
</div>

another solution

Add padding:2px; to all li and on hover remove padding of the hovered li and add border to it Add this CSS

.menu_right{
  float:right;
}
ul.menu li{
  float: left;
  list-style-type: none;
  padding:2px;
}
ul.menu li a{
  text-decoration:none;
}
li.your_space{
  width:100px;
}
li.your_space:hover{
  border: 2px solid black;
  padding:0;
}
li.your_space a>span{
  display:block;
}

Answer 3

Explaining: This is because you are setting a border property on hover, which causes the li to add the border property to its height / width.

You need to set transparent borders on all your li independent on they state, so when you hover any li you won't be adding a border but changing its color.

ul.menu li {
  border: 2px solid transparent;
}

Answer 4

course blocks will move, you add a 2 pixel border (left + right = 4px). As an alternative I can propose "outline"

li.your_space:hover{
  outline: 2px solid black;
}