如何将Bootstrap 3导航子菜单与其父项对齐

Question

我包含this插件以将我的Bootstrap导航子菜单。我的问题是如何将子菜单与其父项对齐。我需要稍微调整一下。

我创造了这样的CSS：

#header-menu-nav .dropdown-menu li ul { margin-top: -27px !important; } 

而且它的正常工作。我的问题在于响应部分。它也受到影响。

这里是我的简单的HTML代码：

<ul class="nav navbar-nav" id="header-menu-nav"> 
    <li> 
     <a href="#">New</a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">TEST</a></li> 
      <li><a href="#">TEST</a></li> 
      <li><a href="#">TEST</a></li> 
      <li><a href="#">TEST</a></li> 
      <li><a href="#">TEST</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Furniture</a></li> 
    <li><a href="#">Lighting</a></li> 
    <li><a href="#">Kitchen</a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">One more link</a></li> 
        <li><a href="#">Menu item 1</a></li> 
        <li><a href="#">Menu item 2</a></li> 
        <li><a href="#">Menu item 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">A long sub menu</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">One more link</a></li> 
          <li><a href="#">Menu item 1</a></li> 
          <li><a href="#">Menu item 2</a></li> 
          <li><a href="#">Menu item 3</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Another link</a></li> 
        <li><a href="#">One more link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Bath</a></li> 
    <li><a href="#">Interior Goods</a></li> 
    <li><a href="#">Gifts</a></li> 
    <li><a href="#">Outlet</a></li> 
</ul> 

你能帮助我。这样做有没有正确的方法？我在CSS中不够好。

Answer 1

试试这个。

#header-menu-nav .dropdown-menu li{ 
    position: relative; 
    } 
    #header-menu-nav .dropdown-menu li ul{ 
    position: absolute; 
    top:0; 
    left: 100%; 
    } 

并删除margin-top：-27px;