html - 下拉菜单将鼠标悬停在上方时将其他链接向下推

Question

我目前正尝试在 CSS 中创建一个下拉菜单。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #282828;
  margin-bottom: 25px;
  color: white;
  text-align: center;
}

.navbar ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.navbar ul li {
  display: inline-block;
  /*float: left;*/
  color: #abcbe3;
  width: 200px;
  height: 40px line-height: 40px;
  color: white;
}

.navbar ul li a {
  display: inline-block;
  text-decoration: none;
  color: white;
  line-height: 40px;
  font-size: 25px;
}

.navbar ul li a:hover {
  color: #abcbe3;
}

.navbar ul li ul li {
  display: none;
  background-color: #282828;
}

.navbar ul li:hover ul li {
  display: block;
}

<div class="navbar">
  <ul>
    <li><a href="#home">Home</a></li>
    <!--Dropdown Navigation Bar for Products-->
    <li><a>Products</a>
      <ul>
        <li><a href="pages/cpu.html">Processors</a></li>
        <li><a href="pages/cpu.html">Graphics Cards</a></li>
        <li><a href="pages/cpu.html">Motherboards</a></li>
        <li><a href="pages/cpu.html">Power</a></li>
      </ul>
    </li>
    <li><a href="pages/register.php">Login/Reigster</a></li>
    <li><a href="#home">Contact</a></li>
    <li><a href="#home">FAQ</a></li>
  </ul>
</div>

我遇到的问题是，当我将鼠标悬停在下拉菜单上时，它会将其他链接向下推。

我认为这与我如何显示元素有关。但是，我需要在 .navbar 类中间居中的导航栏。

Here is the problem.

谢谢。

Answer 1

由于 .navbar ul li 显示是行内 block ，你可以添加属性 vertical-align: top 到它，它会被固定。

也许是这样的？

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #282828;
  margin-bottom: 25px;
  color: white;
  text-align: center;
}

.navbar ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.navbar ul li {
  display: inline-block;
  /*float: left;*/
  color: #abcbe3;
  width: 200px;
  height: 40px line-height: 40px;
  color: white;
    vertical-align: top;
}

.navbar ul li a {
  display: inline-block;
  text-decoration: none;
  color: white;
  line-height: 40px;
  font-size: 25px;
}

.navbar ul li a:hover {
  color: #abcbe3;
}

.navbar ul li ul li {
  display: none;
  background-color: #282828;
}

.navbar ul li:hover ul li {
  display: block;
}

<div class="navbar">
  <ul>
    <li><a href="#home">Home</a></li>
    <!--Dropdown Navigation Bar for Products-->
    <li><a>Products</a>
      <ul>
        <li><a href="pages/cpu.html">Processors</a></li>
        <li><a href="pages/cpu.html">Graphics Cards</a></li>
        <li><a href="pages/cpu.html">Motherboards</a></li>
        <li><a href="pages/cpu.html">Power</a></li>
      </ul>
    </li>
    <li><a href="pages/register.php">Login/Reigster</a></li>
    <li><a href="#home">Contact</a></li>
    <li><a href="#home">FAQ</a></li>
  </ul>
</div>