How to remove twitching when hovering over the menu?

Question

css

When you hover over a menu item, all items move to the right.

.menu {
  margin: -25px 0 0 0;
  font-size: 16px;
  text-align: right;
}
li {
    display: inline-block;
    margin-left: 30px;
}
.menubot {
    color: #000;
    display: block;
    text-decoration: none;
}
.menubot {
    color: #000;
    display: block;
    text-decoration: none;
}
.menubot:hover {
    color: #000;
    display: block;
    text-decoration: none;
  font-weight: 500;
}

Answer 1

You're only sliding because of font-weight: 500; you don’t have solid blocks there, but just by increasing the font thickness, the rest of the extras are shifted to the side by “x px” from the increased font thickness size.
jsfiddle.net/s0Lzq0jm/3