title: Making a drop down menu containing radio buttons
body: <p>So here is the concept I am wanting to achieve:
  <a href="http://i.stack.imgur.com/RqmO1.jpg" rel="nofollow">sketch</a></p>
  
  <p>For those who are unable to view the image, I have a drop-down menu (titled "Presets") containing a list of radio buttons each representing a different preset where upon hovering/selecting on a radio button, the preset corresponding with that radio button is previewed (on hovering over the button) and implemented (on selecting the radio button) on a different div element.</p>
  
  <pre><code>&lt;nav id="topNav"&gt;
  &lt;ul style="list-style: none;"&gt;
  &lt;li&gt;
    &lt;a href="#" title="Nav Link 2"&gt;presets&lt;/a&gt;
    &lt;ul style="list-style: none;"&gt;
      &lt;li&gt;&lt;input type="radio" class="rb" id="pr1" name="preset" value="1" checked="checked"&gt;Preset 1&lt;/li&gt;
      &lt;li&gt;&lt;input type="radio" class="rb" id="pr2" name="preset" value="2"&gt;Preset 2&lt;/li&gt;
      &lt;li&gt;&lt;input type="radio" class="rb" id="pr3" name="preset" value="3"&gt;Preset 3&lt;/li&gt;
      &lt;li&gt;&lt;input type="radio" class="rb" id="pr4" name="preset" value="4"&gt;Preset 4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>      &lt;div id="a"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/JppP5/24/" rel="nofollow">Here</a> is my attempt at executing this. There are a few things that I am having trouble troubleshooting (so I need troubleshooting for myself before I can troubleshoot my problems):</p>
  
  <ol>
  <li><p>The menu seems to drop down by default everytime I refresh the page. Is there a way I can have the menu stay compacted upon refreshing?</p></li>
  <li><p>From my fiddle, you will have noticed on my CSS that I am trying to give my radio buttons hover characteristics (as a way of previewing their presents on the div element) but to no avail. I figure I will need to use scripts for that, right? Specifically, when the mouse cursor hovers over a preset, the div element will momentarily express the details of that preset (in this case, a different color) and when the preset is selected, the div element will change its current color to that of the selected preset.</p></li>
  <li><p>I plan on expanding on this by having the user select a preset for the div element and send the form to save it on a database. Given the functionalities I want, will I have trouble pulling this off in terms of browser compatibility?</p></li>
  </ol>