ファウンデーション6 - ドロップダウンパネル - ボタン付き接続エリア

Question

ボタンとドロップダウンパネルの間に境界線を持たない接続領域のドロップダウンメニューを作成する必要がありますが、ドロップダウンパネルの端にある枠は維持されます。

そして、これが私の目標です：私はこれが私の結果である財団6から

をドロップダウン・ペインを使用して以下

は、ドロップダウン・ラッパーは、ドロップダウントグラーのコンテナである私のHTMLコードですドロップダウンパネル。 data-v-offsetは、item-containerの境界に重なるように-1に設定されます。 item-containerの下の境界線を背景色に設定しようとしましたが、ドロップダウンペインはすぐに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; 
 
          } 
 
         } 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }

私はドロップダウン・ペインとアイテムコンテナの境界を削除するには熱いかわかりません。手伝ってくれませんか？私はあらゆる助けに喜んでいます。

ありがとう、 ミハル

Answer 1

.item-containerはposition: relativeと.dropdown-paneはposition: absoluteを持っている必要があります持っている必要があります。その後、z-indexが動作しています。あなたは、人々がそれをデバッグできるように、問題を再現し、単一のスニペットにすべてのコードを配置する必要があり

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