CSS Flexbox hover 固定 header 下水平导航栏中的文本效果不起作用 - 如何解决？

Question

我想为我正在制作的网站设置固定 header 下方的水平导航栏格式。 我能够这样做，但现在 hover 效果不起作用。 我的意思是，hover 效果仅在我将 cursor 与导航栏的底部边缘对齐（链接位于其正上方）时才有效。 当我的 cursor 悬停在文本上时，我希望 hover 效果起作用。 请帮忙！！ 谢谢你！

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  margin: 0;
  padding: 0;
}

/* all header stuff*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background-color: #c7c7c7; 
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1.0); 
  z-index: 999; /* Ensure the header is above the other elements */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 210px; /* Adjust width as needed */
  height: auto;
  margin-right: 10px; /* Adjust margin as needed */
}

.title {
  margin-bottom: 5px;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 40px;
}

.subheading {
  font-family: 'Raleway', arial, sans-serif;
  font-size: 24px;
  margin-top: 5px;
}

/*all nav bar stuff*/
nav {
  background-color: #c7c7c7;
  height: 40px;
  margin-top: 120px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 20px;
}

nav li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

nav li a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px;
}

nav li a:hover {
  color: #f45c2c;
  text-decoration: underline;
}

<!DOCTYPE html> 
<html>
    <head>
        <title>Bioreactor</title>
    <link href="Bioreactor.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <header>
      <div class="logo-container">
        <img src="logo.png" alt="Logo" class="logo">
        <div>
          <h1 class="title">PAK BioSolutions Process Design | Home</h1>
          <h3 class = "subheading">Driving Advancements in Biopharmaceutical Manufacturing</h3>
        </div> 
      </div>
    </header>

    <nav>
      <ul>
        <li><a href="Bioreactor.html">Bioreactor</a></li>
        <li><a href="Chromatography.html">Chromatography</a></li>
        <li><a href="Virus Inactivation.html">Virus Inactivation</a></li>
        <li><a href="0.2 Micron Filtration.html">0.2 Micron Filtration</a></li>
        <li><a href="Virus Filtration.html">Virus Filtration</a></li>
      </ul>
    </nav>
</body>
</html>

Answer 1

尝试将元素 ul 放入 nav li a:hover 它应该可以工作

Answer 2

添加 ul 然后再试一次导航 li a:hover

Answer 3

你应该把nav放在header里面

 @import url(https://fonts.googleapis.com/css?family=Raleway); body { margin: 0; padding: 0; } /* all header stuff*/ header { position: fixed; /* top: 0; */ /* left: 0; */ width: 100%; /* height: 80px; */ background-color: #c7c7c7; /* padding: 20px; */ /* display: flex; */ /* align-items: center; */ box-shadow: 0 0 10px rgba(0, 0, 0, 1.0); z-index: 999; /* Ensure the header is above the other elements */ }.logo-container { display: flex; align-items: center; }.logo { width: 210px; /* Adjust width as needed */ height: auto; margin-right: 10px; /* Adjust margin as needed */ }.title { margin-bottom: 5px; font-family: 'Raleway', arial, sans-serif; font-size: 40px; }.subheading { font-family: 'Raleway', arial, sans-serif; font-size: 24px; margin-top: 5px; } /*all nav bar stuff*/ nav { background-color: #c7c7c7; /* height: 40px; */ /* margin-top: 120px; */ } nav ul { list-style-type: none; margin: 0; padding: 0; text-align:center; font-family: 'Raleway', arial, sans-serif; font-size: 20px; } nav li { display: inline-block; margin-left: 10px; margin-right: 10px; } nav li a { display: block; color: #333; text-decoration: none; padding: 10px; } nav li a:hover { color: #f45c2c; text-decoration: underline; }

 <header> <div class="logo-container"> <img src="" alt="Logo" class="logo"> <div> <h1 class="title">PAK BioSolutions Process Design | Home</h1> <h3 class="subheading">Driving Advancements in Biopharmaceutical Manufacturing</h3> </div> </div> <nav> <ul> <li><a href="Bioreactor.html">Bioreactor</a></li> <li><a href="Chromatography.html">Chromatography</a></li> <li><a href="Virus Inactivation.html">Virus Inactivation</a></li> <li><a href="0.2 Micron Filtration.html">0.2 Micron Filtration</a></li> <li><a href="Virus Filtration.html">Virus Filtration</a></li> </ul> </nav> </header>