title: Tree-like Select in HTML
body: <p>I'm trying to create a tree-like <code>&lt;select&gt;</code> using HTML and CSS.</p>
  
  <p>To maintain accessibility I'd like to avoid javascript if possible.
  I'd also like to avoid using <code>&amp;nbsp;</code> instead of padding, as this prevents pressing letter keys to jump to items.</p>
  
  <p>What I have so far is this:</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="fluffy" style="padding-left: 10px;"&gt;&lt;/optgroup&gt;
          &lt;optgroup label="kitties" style="padding-left: 20px;"&gt;&lt;/optgroup&gt;
              &lt;option value="1" style="padding-left: 30px;"&gt;Fluffykins&lt;/option&gt;
              &lt;option value="2" style="padding-left: 30px;"&gt;Mr Pooky&lt;/option&gt;
          &lt;optgroup label="puppies" style="padding-left: 20px;"&gt;&lt;/optgroup&gt;
              &lt;option value="3" style="padding-left: 30px;"&gt;Doggins&lt;/option&gt;
  
      &lt;optgroup label="not fluffy" style="padding-left: 10px;"&gt;&lt;/optgroup&gt;
          &lt;optgroup label="snakes" style="padding-left: 20px;"&gt;&lt;/optgroup&gt;
              &lt;option value="4" style="padding-left: 30px;"&gt;Fingers&lt;/option&gt;
          &lt;optgroup label="crabs" style="padding-left: 20px;"&gt;&lt;/optgroup&gt;
              &lt;option value="5" style="padding-left: 30px;"&gt;Lucky (AKA Citizen Snips)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This works fine in Firefox, but IE ignores the padding, rendering it as a flat list (quite hard to use) and Chrome doesn't render the <code>&lt;optgroup&gt;</code>s, which are technically not valid as  an <code>&lt;optgroup&gt;</code> is supposed to contain at least on <code>&lt;option&gt;</code>.</p>
  
  <p>Unfortunately <code>&lt;optgroup&gt;</code>s can't be nested.</p>
  
  <p><a href="http://twitpic.com/cuaap" rel="noreferrer">This is how Firefox renders it</a></p>