不在父级和下拉菜单下的Bootstrap CSS Subitem具有不需要的空间

Question

我有一个带有dropdownitem的菜单。当悬停项目时，列表会出现，但我希望背景居中的文本位于父项目下方。这是我第一次构建下拉菜单，但它确实无法正常工作。

我试图找到一个解决方案，但没有什么对我有用。此外，左边有不需要的空间，我不知道如何摆脱它。

我正在使用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

我认为“左边不需要的空间”是浏览器添加的默认填充左侧，所以我要添加：

NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"deeplink://"]];

NSArray * activityItems = @[url];
NSArray * applicationActivities = nil;
NSArray * excludeActivities = @[UIActivityTypeAssignToContact, UIActivityTypeCopyToPasteboard, UIActivityTypePostToWeibo, UIActivityTypePrint, UIActivityTypeMessage];

UIActivityViewController * activityController = [[UIActivityViewController alloc] initWithActivityItems:activityItems applicationActivities:applicationActivities];
activityController.excludedActivityTypes = excludeActivities;

[self presentViewController:activityController animated:YES completion:nil];

之后，我会删除负余量.navbar .navbar-nav > li > ul{ padding:0; }

然后你可以调整第一级项目和下拉列表的填充。 e.g。

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;
}

请注意，您的下拉菜单不适用于移动（小屏幕）设备;如果你搜索“bootstrap navbar multilevel”，你会发现一些现成的bootstrap插件。