與Susy網格的水平列表

Question

我想構建一個像主要導航的機器人，它適合Susy網格。它看起來像這樣：

的代碼放在這裏：

HTML：

<div class="container"> 
    <nav> 
     <ul class="horizontal-list"> 
      <li> 
       <a href="#">One</a> 
      </li> 
      <li> 
       <a href="#">Two</a> 
      </li> 
      <li> 
       <a href="#">Three</a> 
      </li> 
      <li> 
       <a href="#">Four</a> 
      </li> 
     </ul> 
    </nav> 
</div> 

SASS：

header.main { 
    height: $headerHeight; 
    background: url('images/headerBackground.gif'); 

    .container { 
     @include container; 
     @include susy-grid-background; 

     nav { 
      @include span-columns(8); 

      ul.horizontal-list { 
       @include horizontal-list; 
       overflow: visible; 

       li { 
        @include isolate-grid(2, 8); 

        padding: 0; 
        display: table; 
        a { 
         // vertical alignment 
         display: table-cell; 
         height: $headerHeight/2; 
         padding-bottom: 2px; 
         vertical-align: bottom; 

         // appearance 
         color: $greyLight; 
         font-size: 18px; 
         text: { 
          transform: uppercase; 
          decoration: none; 
         } 

         // hover 
         position: relative; 
         &:before { 
          content: ''; 
          display: block; 
          width: $headerUnderlineGap; 
          background: $black; 
          height: $headerHeight; 
          position: absolute; 
          top: 0; 
          margin-left: -$headerUnderlineGap + 1; 
         } 

         &:hover { 
          color: $white; 

          &:after { 
           content: ''; 
           display: block; 
           background: $cyanLight; 
           width: 114%; // TODO check why space(2, 8) does not work 
           height: 4px; 
           position: absolute; 
           margin: -1px 0 0 1px; 
          } 
         } 
        } 
       } 
      } 
     } 
    } 
} 

我覺得這是一個有點哈克設置&:after元素的寬度爲114%，而不是space(2, 8)。任何人都可以告訴我，如何用Susy網格和連續下劃線設置水平導航，並一路懸停到下一個li元素。

在此先感謝！

Answer 1

space(2,8)在這種情況下不起作用，因爲8實際上並不是上下文：2是。你只需要space(2,2)。