addClass

by Chris LaFrombois

HTML

<div id="m">
  <ul>
  <li class="parent"><a href="#">Contact Us</a></li>
      <li class="parent"><a href="http://google.com">Store</a>
            
             <ul class="submenu">
                 <li><a href="http://google.com">Man</a></li>
                   <li><a href="#">Woman</a></li>
                   <li><a href="#">Accessories</a></li>
                </ul><!-- .submenu -->
              
   </li>
  </ul>
</div>

CSS

#m .parent > a {
    text-decoration: none;
}
#m .parent:hover > a {
    color:#000 !important;
}
#m .parent > a.clicked {
    color: #823428;
    border-bottom: #823428 2px solid !important;;
}
.submenu a {
    text-decoration: none;
}

JavaScript

$(".parent > a").click(function(e) {
    e.preventDefault();
    $(".parent > a").each(function () {
        if( $(this).hasClass("clicked") )
            $(this).removeClass("clicked");
    });
    $(this).addClass('clicked');
});