파운데이션 6 - 드롭 다운 패널 - 버튼이있는 연결된 영역

Question

버튼과 드롭 다운 패널 사이에 테두리가없는 연결된 영역이있는 드롭 다운 메뉴를 만들 필요가 있지만 드롭 다운 패널의 가장자리에있는 테두리는 그대로 유지됩니다. 나는이 내 결과입니다 재단 6.

에서 드롭 다운-창을 사용 :

그리고 이것은 내 대상 : 아래

내 HTML 코드 드롭 다운-래퍼 컨테이너가 드롭 다운 toggler입니다 드롭 다운 패널. data-v-offset은 item-container의 경계와 겹치도록 -1로 설정됩니다. item-container의 아래쪽 테두리를 배경색으로 설정하려고했지만 drop-pane은 item-container 요소와 즉시 겹칩니다.

<ul class="bottom-menu"> 
 
           <li class="dropdown-wrapper" data-toggle="header-shopping-card" > 
 
            <a href="#" class="item-container"> 
 
             
 
             <div class="item-content"> 
 
              <div class="item-title"> 
 
               <span>Nákupní košík</span> 
 
               <span class="box primary"><span>4</span></span> 
 
              </div> 
 
              <div class="item-subtitle">12 000 Kč</div> 
 
             </div> 
 
            </a> 
 
            <div 
 
             class="dropdown-pane" 
 
             id="header-shopping-card" 
 
             data-dropdown data-hover="true" 
 
             data-hover-pane="false" 
 
             data-position="bottom" 
 
             data-alignment="right" 
 
             data-hover-delay=0 
 
             data-v-offset=-1 
 
            > 
 
             Just some junk that needs to be said. Or not. Your choice. 
 
            </div> 
 
           </li> 
 
           
 
          </ul>

그리고 이것은 내 SCSS 코드 :

.bottom-menu { 
 
        @include menu-base; 
 
        @include flex-align(right, middle); 
 

 
        .dropdown-wrapper { 
 
         border: 0; 
 

 
         &:hover { 
 
          .item-container { 
 
           background-color: $light-gray; 
 
           border: 1px solid $dark-gray; 
 
           border-bottom: 1px solid transparent; 
 

 
           .item-content { 
 
            color: $black; 
 
           } 
 

 
           .item-subtitle { 
 
            color: $dark-gray; 
 
           } 
 
          } 
 
         } 
 

 
         .dropdown-pane { 
 
          background-color: $light-gray; 
 
          border: 1px solid $dark-gray; 
 
         } 
 
        } 
 

 
        .dropdown-pane { 
 
         font-size: $global-font-size; 
 
        } 
 

 
        .item-container { 
 
         transition-delay: 0; 
 
         display: flex; 
 
         align-items: flex-end; 
 
         font-size: $small-font-size; 
 
         border: 1px solid transparent; 
 

 
         .item-icon { 
 
          width: rem-calc(35px); 
 
          height: auto; 
 
          color: $accent-secondary; 
 

 
          .item-icon-path { 
 
           fill: $accent-secondary; 
 
          } 
 

 
          .item-icon-path-circle { 
 
           fill: $green; 
 
          } 
 

 
          .item-icon-path-check { 
 
           fill: $header-primary-color; 
 
          } 
 
         } 
 

 
         .item-content { 
 
          padding-left: 6px; 
 
          color: $header-primary-color; 
 
          font-size: rem-calc(12px); 
 

 
          .item-title { 
 
           margin-bottom: 4px; 
 
          } 
 
          .item-subtitle { 
 
           line-height: 1em; 
 
           color: $header-secondary-color; 
 
          } 
 

 
          .box { 
 
           display: inline-flex; 
 
           justify-content: center; 
 
           align-items: center; 
 
           min-width: rem-calc(21px); 
 
           min-height: rem-calc(21px); 
 
           color: $white; 
 
           font-size: rem-calc(13px); 
 
          } 
 
          .box.primary { 
 
           background-color: $primary-color; 
 
          } 
 
         } 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }

나는 드롭 - 창 및 항목 컨테이너 사이에 테두리를 제거 뜨거운 모른다 . 저를 도와주세요? 나는 모든 도움에 기뻐할 것입니다.

는 position: relative이 있어야 마이클

Answer 1

.item-container을 주셔서 감사 .dropdown-pane는 position: absolute이 있어야합니다. 그 후 z-index이 작동합니다. 당신은 사람들이 그것을 디버깅 할 수 있도록 문제를 재현 한 조각에 모든 코드를 삽입 할 필요가

.item-container:after { 
 
           content: ''; 
 
           background-color: $light-gray; 
 
           position: absolute; 
 
           width: 100%; 
 
           height: 1px; 
 
           left: 0; 
 
           bottom: -1px; 
 
          }