Bootstrap CSS子項不在父項下拉菜單中有不需要的空間

Question

我有一個dropdownitem菜單。當懸停該項目時，列表出現，但我希望背景中心位於父項目下方的文本。這是我第一次構建下拉菜單，並且它不工作。

我試圖找到一個解決方案，但沒有真的爲我工作。另外，左邊有不需要的空間，我不知道如何擺脫它。

我使用引導程序，如果這是相關的任何方式。

在這裏你可以看到它的樣子。它不直接在它的父母下面，我不能讓文字居中，左邊有空格。

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

我覺得 「左不必要的空間」 是默認填充左側添加的瀏覽器，所以我會補充：

.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」，您會發現一些即用型引導程序插件。