<div class="categ" style="display:none;">

 <div class="the_categories" id="categ_1">Colors 1</div>
    <span class="categ_1">Blue</span>
    <span class="categ_1">Red</span>
    <span class="categ_1">Green</span>

 <div class="the_categories" id="categ_2">Colors 2</div>
    <span class="categ_2">Yellow</span>
    <span class="categ_2">Grey</span>
    <span class="categ_2">White</span>

</div>

For example results on site:

<div class="button">
<a class="button dropdown" id="cat_no_1">Colors 1</a>
   <div class="dropdown-menu hold-on-click dropdown-checkboxes">
       <label class="cat_no_1">Blue</label>
       <label class="cat_no_1">Red</label>
       <label class="cat_no_1">Green</label>
   </div>
</div>

<div class="button">
<a class="button dropdown" id="cat_no_2">Colors 2</a>
  <div class="dropdown-menu hold-on-click dropdown-checkboxes">
      <label class="cat_no_2">Yellow</label>
      <label class="cat_no_2">Grey</label>
      <label class="cat_no_2">White</label>
   </div>
</div>