title: Keep hover effect when link is active
body: <p><strong>What I would like to happen</strong></p>
  
  <ul>
  <li><p>My links have a hover effect. How can I make it so that effect stays on when the link is clicked / activated?</p></li>
  <li><p>Then, when you click a new link, I want the previous hover effect to disappear until clicked again.</p></li>
  </ul>
  
  <p>I hope someone is able to help with the problem, so i can get my site up and running :)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
  
          &lt;div id="menu"&gt;
  
  
              &lt;nav id="navigation" class="site-navigation" role="navigation"&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Overvågning&lt;/a&gt;
                          &lt;ul class="dropdown"&gt;
                              &lt;li class="menu-item sub-menu"&gt;&lt;a href="proddigi.aspx"&gt;Digital&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="menu-item sub-menu"&gt;&lt;a href="prod-analog.aspx"&gt;Analog&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Alarm&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
  
  
          &lt;form id="form1" runat="server"&gt;
              &lt;div&gt;
                  &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
                  &lt;/asp:ContentPlaceHolder&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
  }
  .site-navigation {
      display: block;
      font-family: 'Helvetica Neue LT Pro',Verdana;
      font-size: 13px;
  }
  
      .site-navigation ul {
          background: #3498DB;
          list-style: none;
          margin: 0;
          padding-left: 0;
      }
  
      .content-place
      {
         padding-top:400px;
      }
  
      .site-navigation li {
          color: #fff;
          background: #112d3b;
          display: block;
          float: left;
          margin: 0 0 0 0;
          padding: 25px 18px;
          position: relative;
          text-decoration: none;
          text-transform: uppercase;
      }
          /* texten i menuen*/
          .site-navigation li a {
              color: #fff;
              text-decoration: none;
              display: block;
              height: 33px;
              position: relative;
              display:table-cell;
              vertical-align:middle;
          }
          /* hover menuen - Det der sker når man holder musen over menuen */
          .site-navigation li:hover {
              @include transition(background, 0.2s);
              background: #1e495f; /* farve på hover*/
              cursor: pointer;
              border-bottom: 3px solid red;
          }
  
      .site-navigation ul li ul {
          background: #112d3b;
          visibility: hidden;
          float: left;
          width: 50px;
          position: absolute;
          transition: visibility 0.1s ease-in;
          margin-top: 25px;
          left: 0;
          z-index: 999;
      }
  
          .site-navigation ul li:hover &gt; ul,
          .site-navigation ul li ul:hover {
              visibility: visible;
              z-index: 999;
          }
          /* Drop down Menuen */
          .site-navigation ul li ul li {
              clear: both;
              padding: 5px 0 5px 18px;
              width: 111px;
              height:auto;
              z-index: 999;
  
  
  
          }
  
              .site-navigation ul li ul li:hover {
                  background: #1e495f;
                  z-index: 999;
              }
  </code></pre>