title: How to convert a 'div' into a dropdown using CSS/Jquery
body: <p>I have a set of buttons encapsulated in a <code>div</code> that i want to look like a dropdown:</p>
  
  <pre><code>&lt;div id="group"&gt;
       &lt;label&gt;Group:&lt;/label&gt;
       &lt;div value="1hour"&gt;1h&lt;/div&gt;
       &lt;div value="2hour"&gt;2h&lt;/div&gt;
       &lt;div value="3hour"&gt;3h&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to convert the above into:</p>
  
  <pre><code>&lt;label&gt;Group&lt;/label&gt;
   &lt;select&gt;
    &lt;option value="1hour"&gt;1h&lt;/option&gt;
     &lt;option value="2hour"&gt;2h&lt;/option&gt;
     &lt;option value="3hour"&gt;3h&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>However while i change the look of the above <code>div</code> menu, i'm trying to retain the js code and have the code work exactly the same as before after the change in the look..</p>
  
  <pre><code>    $("div#group").each(function(i, ele) {
          $(ele).bind("click", function() { 
              drawChart(this); 
          });
      });
  
  
      drawChart: function(){
         //does something here;
      }
  </code></pre>
  
  <p>Is there any way in CSS i change the feel but not the existing code for the div? any ideas??
  Thanks!!</p>