html - Bootstrap CSS 子项不在父级和下拉菜单下有不需要的空间

Question

我有一个带有下拉项的菜单。悬停元素时会出现列表，但我希望背景文本在父元素下方居中。这是我第一次构建下拉菜单，但它并没有真正起作用。

我试图找到一个解决方案，但没有一个真正适合我。另外，左边有不需要的空间，我不知道如何摆脱它。

我正在使用 bootstrap，如果它有任何相关性的话。

在这里你可以看到它的样子。它不在其父项的正下方，我无法使文本居中并且左侧有空格。

HTML

.navbar {
  margin-left: -3px;
  margin-bottom: 0;
  background: #292657;
  border: none;
}
.navbar .navbar-nav > li > ul {
  display: none;
  z-index: 1;
  background: #292657;
  position: absolute;
  visibility: hidden;
  list-style-type: none;
}
.navbar .navbar-nav > li > ul > li {
  margin: 0 auto;
  margin-bottom: 15px;
  display: block;
}
.navbar .navbar-nav > li > ul > li > a {
  color: #fff;
  font-size: 14px;
  font-weight: lighter;
  text-transform: uppercase;
  list-style-type: none;
}
.navbar .navbar-nav > li > ul > li > a:hover {
  text-decoration: none;
  color: #fff;
}
.navbar .navbar-nav > li > a {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: lighter;
  text-transform: uppercase;
  padding: 25px 40px 25px 0px;
  list-style-type: none;
}
.navbar .navbar-nav > li > a:hover {
  color: #fff;
  text-decoration: underline;
}
.navbar .navbar-nav > li:hover > ul {
  display: block;
  position: absolute;
  margin-left: -45px;
  visibility: visible;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container" style="margin-left:50px;">
    <ul class="nav navbar-nav">
      <li>
        <a href="">Startseite</a>
      </li>
      <li>
        <a href="ueber-mich/">Über&nbsp;mich</a>
      </li>
      <li>
        <a href="#anker">Referenzen</a>
        <ul>
          <li><a href="maler-und-tapezierarbeiten/">Maler- und Tapezierarbeiten</a>
          </li>
          <li><a href="fenster-und-tuerenanstrich">Türen und Fensteranstrich</a>
          </li>
          <li><a href="spachtel-und-lasurtechniken/">Spachtel- und Lasurtechniken</a>
          </li>
          <li><a href="fassadenanstrich/">Fassadenanstrich</a>
          </li>
          <li><a href="">Dekorputze</a>
          </li>
          <li><a href="renovierung/">Renovierungen</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="impressum/">Impressum</a>
      </li>
    </ul>
  </div>
</nav>

非常感谢帮助，非常感谢

Answer 1

我认为“左边不需要的空间”是浏览器默认添加的 padding-left，所以我会添加:

.navbar .navbar-nav > li > ul{
  padding:0;
 }

之后，我将删除负边距 margin-left:-45px

然后您可以调整第一级元素和下拉菜单的填充。 例如

.navbar {
  margin-left: -3px;
  margin-bottom: 0;
  background-color: #292657;
  border: none;
}
.navbar .navbar-nav > li > ul {
  display: none;
  z-index: 1;
  background: #292657;
  position: absolute;
  visibility: hidden;
  list-style-type: none;
  padding: 0 40px;
}
.navbar .navbar-nav > li > ul > li {
  margin: 0 auto;
  margin-bottom: 15px;
  display: block;
}
.navbar .navbar-nav > li > ul > li > a {
  color: #fff;
  font-size: 14px;
  font-weight: lighter;
  text-transform: uppercase;
  list-style-type: none;
}
.navbar .navbar-nav > li > ul > li > a:hover {
  text-decoration: none;
  color: #fff;
}
.navbar .navbar-nav > li > a {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: lighter;
  text-transform: uppercase;
  padding: 25px 40px 25px 40px;
  list-style-type: none;
}
.navbar .navbar-nav > li > a:hover {
  color: #fff;
  text-decoration: underline;
}
.navbar .navbar-nav > li:hover > ul {
  display: block;
  position: absolute;
  visibility: visible;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
            <div class="container" style="margin-left:50px;">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="">
                            Startseite
                        </a>
                    </li>
                    <li>
                        <a href="ueber-mich/">
                            Über&nbsp;mich
                        </a>
                    </li>
                    <li>
                        <a href="#anker">
                            Referenzen
                        </a>
                        <ul>
                            <li><a href="maler-und-tapezierarbeiten/">Maler- und Tapezierarbeiten</a></li>
                            <li><a href="fenster-und-tuerenanstrich">Türen und Fensteranstrich</a></li>
                            <li><a href="spachtel-und-lasurtechniken/">Spachtel- und Lasurtechniken</a></li>
                            <li><a href="fassadenanstrich/">Fassadenanstrich</a></li>
                            <li><a href="">Dekorputze</a></li>
                            <li><a href="renovierung/">Renovierungen</a></li>                   
                        </ul>
                    </li>
                    <li>
                        <a href="impressum/">
                            Impressum
                        </a>
                    </li>
                </ul>
            </div>
</nav>

请注意，您的下拉菜单不适用于移动(小屏幕)设备；如果您搜索“bootstrap navbar multilevel”，您会找到一些现成的 bootstrap 插件。