title: freezing hover onclick after clicking a menu option
body: <p>I have a menu.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu {
    background: red;
  }
  .menu-option {} .menu-option:hover {
    background: maroon;
  }
  .menu-option:active {
    background: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu" align="center"&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(1)"&gt;Literary&lt;/div&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(2)"&gt;FilmFest&lt;/div&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(3)"&gt;Dance&lt;/div&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(4)"&gt;Music&lt;/div&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(5)"&gt;Fine Arts&lt;/div&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(6)"&gt;Quiz&lt;/div&gt;
    &lt;div class="menu-option" align="center" onclick="showgenre(7)"&gt;Dramatics&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now what I want is, when I click any menu option the <code>background</code> of that specific <code>menu-option</code> should become <code>maroon</code> permanently till any other option is clicked while all others are <code>red</code>.</p>
  
  <p>How do I achieve the same? CSS preferred.</p>