Question

这是网站的导航栏。我想知道为什么它在悬停时调整大小以及如何修复它（即，不调整大小）。现在，当鼠标放在导航栏中的项目上时，它会展开。

这是我的代码：

<!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 1

您尚未为链接设置line-height，并且由于您使用悬停交换字体样式，因此它使用字体的默认行高。在下面的示例中，我将链接设置为line-height: 1;，跳转不再发生。

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>

导航器在悬停时调整大小

1 个答案: