title: How to use multi-column option box within select element
body: <p>we all know <strong>Drop-down list</strong> can have <a href="https://codepen.io/dustlilac/pen/Qwpxbp?editors=1010" rel="nofollow noreferrer">mutli menus in drop down</a> like this</p>
  
  <p>I was trying to do the same using <strong>select</strong> element</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#otp2{
    margin-top:-100px;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    
    &lt;optgroup id="otp1" label="Category 1"&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
    &lt;/optgroup&gt;
  
    &lt;optgroup id="otp2"   label="Category 2"&gt;
      &lt;option&gt;4&lt;/option&gt;
      &lt;option&gt;5&lt;/option&gt;
    &lt;/optgroup&gt;
  
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to adjust it with the margins but none works. how to do it?</p>
  
  <p>Is it possible in select option list?</p>