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

将position:absolute添加到悬停显示的<ul>上：) 完成此操作后，此列表将不在常规页面流中，并且不会将其余元素下推：）

https://jsfiddle.net/f84xwsd5/

Answer 2

由于.navbar ul li显示为行内阻止，因此可以向其中添加属性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>

下拉菜单将鼠标悬停在其他链接上

2 个答案: