Question

当我将鼠标悬停在html部分上时，html＆amp;由于某种原因，css nav选项被移动到右侧，如何使其与其他导航选项对齐。

#nav {
  list-style: none;
  text-align: center;
  padding: 1.250em 0 1.250em 0;
  background: #ffffff;
  font-size: 106.25%;
  font-family: 'Oxygen';
}

#nav li a {
  text-decoration: none;
  text-align: center;
  color: #FFF;
}

#nav ul li ul.dropdown {
  background-color: #000000;
  display: none;
  position: fixed;
  z-index: auto;
  left: 400;
  vertical-align: left;
}

#nav ul li:hover ul.dropdown {
  display: block;
}

#nav ul li ul.dropdown li {
  display: block;
}

#nav > ul > li {
  display: inline-block;
  margin-right: 2%;
  padding: 4.375em 1.250em 4.375em 1.250em;
}

#nav > ul > li > a {
  text-decoration: none;
  color: #000000;
}

#nav > ul > li > a:hover {
  color: #00c5a2;
}

Answer 1

您的<ul>具有必须删除的默认样式（padding-left）。添加

#nav ul li ul.dropdown {
    padding-left: 0;
}

将文字移到左侧。

您还应检查自己的CSS，vertical-align: left和left: 400（没有单位）无效并且无法正常工作。

Answer 2

尝试更改.dropdown样式，如下所示：

#nav ul li ul.dropdown {
  background-color: #000000;
  display: none;
  position: absolute;
  z-index: auto;
  left: 0;
  vertical-align: left;
}

然后父亲li位置为亲戚：

#nav > ul > li {
    display: inline-block;
    margin-right: 2%;
    padding: 4.375em 1.250em 4.375em 1.250em;
  position: relative;
}

这可确保下拉列表始终将其自身绝对置于其父级（li）。

同时将padding: 0添加到dropdown ul：

#nav ul li:hover ul.dropdown {
  display: block;
  padding: 0;
}

小提琴：https://jsfiddle.net/04zospoj/

Answer 3

你可以解决在#nav ul li ul.dropdown的css中添加padding left = 0的问题：

#nav ul li ul.dropdown {
    padding-left: 0;
}

有什么东西让我的下拉导航栏向右移动

3 个答案: