ZigZagZebra ZigZagZebra - 7 months ago 22
HTML Question

Navigator resize when hover

Here is the navigator bar of a website. I am wondering why it resizes on hover and how to fix it (i.e., do not resize). Right now when put the mouse on the item in the navigator bar, it expands.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
position: fixed;
top: 0;
width: 100%;
background-color: rgb(255, 255, 255);
opacity: 1.0;
list-style-type: none;
margin: 0;
overflow: hidden;
-moz-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5);
box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5);
padding: 5px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 25px;
text-decoration: none;
}
li a:hover {
font-family: cursive;
}
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>

<body>
<header id="header">
<ul>
<li><a href="#experience">Experience</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#home">Home</a></li>
</ul>
</header>

Answer

You haven't set a line-height for the link, and since you're swapping out font-styles with your hover it uses the font's default line-height. In the example below I've set the links to have a line-height: 1; and the jumping no longer happens.

ul {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(255, 255, 255);
    opacity: 1.0;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    -moz-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5);
    box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5);
    padding: 5px;
}
li {
    float: right;
}
li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
    line-height: 1;
}
li a:hover {
    font-family: cursive;
}
a {
    color: black; 
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
<header id="header">
    <ul>  
      <li><a href="#experience">Experience</a></li>
      <li><a href="#background">Background</a></li>
      <li><a href="#home">Home</a></li>
    </ul>
</header>

Comments