Pure CSS dropdown triggered my click

by Hans PUFAL

HTML

<div id="dd">
  <div id="selector">Select Language</div>
  <ul>
    <li>
      <label>
        <input name="lang" type="radio" checked><span>English</span></label>
    </li>
    <li>
      <label>
        <input name="lang" type="radio"><span>French</span></label>
    </li>
    <li>
      <label>
        <input name="lang" type="radio"><span>German</span></label>
    </li>
    <li>
      <label>
        <input name="lang" type="radio"><span>Spanish</span></label>
    </li>
  </ul>
</div>

CSS

#dd { display: inline-block; }
#dd:active ul,
#dd:active ul:hover { display: block; }
#dd:active #selector { padding: 10px; background: #ccc; color: white; }

ul { display: none; position: relative; top: -55px; padding: 55px 0 0 0; margin: 0; }
ul:hover { display: block; }

li { background: #ddd; padding: 10px; list-style: none; }

li:hover { background: #eee; color: green }

label input:checked + span { color: red }

li label, li span { cursor: pointer; }

#selector { padding: 10px; background: #aaa; color: white; border: 0 #ccc; }

#selector:active { background: inherit }