title: Attach vertical menu to segment using Semantic UI
body: <p>How is it possible to attach a vertical menu to segment using the Semantic-UI CSS framework? When using the markup presented in the documentation there will be a margin (resulting form the grid padding) between the content and the menu. If not using a grid the borders don't fit.</p>
  
  <pre><code>    &lt;div class="ui grid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="sixteen wide column"&gt;
              &lt;!-- Overlapping border --&gt;
              &lt;div class="ui horizontal segments"&gt;
                  &lt;div class="ui vertical tabular menu"&gt;
                      &lt;a class="active item"&gt;Bio&lt;/a&gt;
                      &lt;a class="item"&gt;Pics&lt;/a&gt;
                      &lt;a class="item"&gt;Companies&lt;/a&gt;
                      &lt;a class="item"&gt;Links&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="ui segment"&gt;
                      This is an stretched grid column. This segment will always match the tab height
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;!-- Margin between the elements --&gt;
          &lt;div class="four wide column"&gt;
              &lt;div class="ui vertical fluid tabular menu"&gt;
                  &lt;a class="active item"&gt;Bio&lt;/a&gt;
                  &lt;a class="item"&gt;Pics&lt;/a&gt;
                  &lt;a class="item"&gt;Companies&lt;/a&gt;
                  &lt;a class="item"&gt;Links&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="twelve wide stretched column"&gt;
              &lt;div class="ui segment"&gt;
                  This is an stretched grid column. This segment will always match the tab height
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;!-- Margin between the elements --&gt;
          &lt;div class="four wide column"&gt;
              &lt;div class="ui vertical fluid menu"&gt;
                  &lt;a class="active item"&gt;Bio&lt;/a&gt;
                  &lt;a class="item"&gt;Pics&lt;/a&gt;
                  &lt;a class="item"&gt;Companies&lt;/a&gt;
                  &lt;a class="item"&gt;Links&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="twelve wide stretched column"&gt;
              &lt;div class="ui segment"&gt;
                  This is an stretched grid column. This segment will always match the tab height
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="sixteen wide column"&gt;
              &lt;!-- Overlapping border --&gt;
              &lt;div class="ui horizontal segments"&gt;
                  &lt;div class="ui vertical menu"&gt;
                      &lt;a class="active item"&gt;Bio&lt;/a&gt;
                      &lt;a class="item"&gt;Pics&lt;/a&gt;
                      &lt;a class="item"&gt;Companies&lt;/a&gt;
                      &lt;a class="item"&gt;Links&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="ui segment"&gt;
                      This is an stretched grid column. This segment will always match the tab height
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Schaumbaum/s181wkvk/" rel="nofollow noreferrer" title="JSFiddle">JSFiddle</a></p>
  
  <p>I expect that the vertical menu is attached to the segment (like when using horizontal menus).
  <a href="https://i.stack.imgur.com/QYHNw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QYHNw.jpg" alt="Tabular"></a>
  <a href="https://i.stack.imgur.com/sUiuE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sUiuE.jpg" alt="Menu"></a></p>