Bootstrap 3 Navサブメニューをその親に整列する方法

Question

私はthisプラグインを使用して、Bootstrap Navサブメニューを作成しました。私の問題は、どのようにサブメニューをその親に揃えることができるかということです。私はそれを少し下に移動する必要があります。

私はこのような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%; 
    } 

マージントップ：-27px;