부트 스트랩 3 내비게이션 하위 메뉴를 부모와 정렬하는 방법

Question

this 플러그인을 사용하여 내 부트 스트랩 탐색 하위 메뉴를 포함 시켰습니다. 내 문제는 부모에게 서브 메뉴를 정렬시키는 방법이다. 나는 그것을 조금 아래로 움직일 필요가있다.

나는이 같은 CSS 생성 :

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

을 그리고 그것은 잘 작동합니다. 내 문제는 반응적인 부분에 있습니다. 그것은 또한 영향을 받았다.

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

당신이 날 도와 줄 수 :

여기에 간단한 HTML에 내 코드입니다. 이 일을하는 적절한 방법이 있습니까? 나는 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;