Inline items in semantic ui dropdown menu

Question

I have a drop down menu and I want to have a submenu that lists colours. I'd prefer the list of colours to just be circles with the colour in it (no names). And to save vertical space I'd like to have say 4 or 5 in a row (there are about 14 colours in all). So far I'm having no luck I've come close (see the code below) but the menu is too wide and I can't seem to figure out how it's getting its width in the CSS:

<div class="item">
  <i class="paint brush icon"></i>Colour
  <div class="compact menu">
    <div class="ui two column padded grid">
      <div class="column">
      <a class="item">
        <div class="ui red empty circular label"></div>
        Red
      </a>
      </div>
      <div class="column">
      <a class="item">
        <div class="ui orange empty circular label"></div>
        Orange
      </a>
      </div>
      <div class="column">
      <a class="item">
        <div class="ui yellow empty circular label"></div>
        Yellow
      </a>
      </div>
      <div class="column">
      <a class="item">
        <div class="ui olive empty circular label"></div>
        Olive
      </a>
      </div>
      <div class="column">
      <a class="item">
        <div class="ui green empty circular label"></div>
        Green
      </a>
      </div>
    </div>
  </div>
</div>

Answer 1

I ended up working it out for myself with the help of someone on the Semantic UI gitter chat channel:

<div class="item colour">
  <i class="paint brush icon"></i>Colour
  <div class="ui icon left menu">
      <a class="item" title="Red" data-colour="red">
        <i class="red circle fitted icon"></i>
      </a>
      <a class="item" title="Orange" data-colour="orange">
        <i class="orange circle fitted icon"></i>
      </a>
      <a class="item" title="Yellow" data-colour="yellow">
        <i class="yellow circle fitted icon"></i>
      </a>
      <br>
      <a class="item" title="Olive" data-colour="olive">
        <i class="olive circle fitted icon"></i>
      </a>
      <a class="item" title="Green" data-colour="green">
        <i class="green circle fitted icon"></i>
      </a>
      <a class="item" title="None" data-colour="">
        <i class="red ban fitted icon"></i>
      </a>
  </div>
</div>

It requires the following custom CSS:

.ui.dropdown .item.colour {
  > .icon.menu {
    font-size: 0;

    > .item {
      display: inline-block;
    }
  }
}

It now looks like this: