drop down menu with active class status

by Kheema Pandey

HTML

<nav>
    <ul>
        <li><a href="javascript:void(0)"><img src="img/home.png" alt="Home Icon" /></a></li>
        <li><a href="javascript:void(0)">Bundle</a></li>
        <li><a href="javascript:void(0)">Faqs</a></li>
        <li><a href="javascript:void(0)">Contact Us</a></li>
    </ul>
</nav>

CSS

nav ul
{
list-style-type:none;
margin:0;
padding:0;
background-color:#F6F6F6;
}

nav ul li
{
display: block;
float: left;
padding:25px 20px;
border-bottom:4px solid #DDDDDD;
}

nav ul li a
{
font: 400 14px Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform: uppercase;
color: #2a323a;
}

nav ul li:hover
{
background-color: #ffffff;
/*background-attachment: fixed;
background-image: url(../img/hover-bg_05.png);*/
border-bottom:4px solid #3DA6DC;
}
.current
{
  border-bottom:4px solid #3DA6DC;
  background-color: #ffffff;
}

JavaScript

$("li").click(function () {
  $(this).toggleClass("current");
  $("li").not(this).removeClass("current");
});