Question: am new to jQuery. I have mouse hover border bottom and active class which also have same border bottom. However I don't want mouse hover when my menu item is active? How can I do that because currently I have two border bottom when my menu item is active. 

Please find below snippet what i have done so far.

```js
$(".main-nav li a").click(function() {
  $(this).parent().addClass('active').siblings().removeClass('active');
});
```

```css
.main-nav li a:hover { 
border-bottom: 2px solid #1ABC9C;
}
.active {border-bottom: 2px solid #1ABC9C;}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
   <li><a href="#">Food delivery</a></li>
   <li><a href="#">How it works</a></li>
   <li><a href="#">Our cities</a></li>
   <li><a href="#">Sign up</a></li>
</ul>
```

Answer: 
Use `.main-nav li:not(.active) a:hover` in your CSS:

```js
$(".main-nav li a").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
    });
```

```css
.main-nav li:not(.active) a:hover { 
    border-bottom: 2px solid #1ABC9C;
 }
.active {border-bottom: 2px solid #1ABC9C;}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <ul class="main-nav">
           <li><a href="#">Food delivery</a></li>
           <li><a href="#">How it works</a></li>
           <li><a href="#">Our cities</a></li>
           <li><a href="#">Sign up</a></li>
       </ul>
```
Add a class to `li` as `hover` and when any `li` active remove that `hover` class please find below snippet for more info

```js
$(".main-nav li a").click(function() {
    $(this).parent().addClass('active').removeClass('hover').siblings().removeClass('active');

    });
```

```css
.main-nav .hover a:hover { 
    border-bottom: 2px solid #1ABC9C;
       }
    .active {border-bottom: 2px solid #1ABC9C;}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
           <li class="hover"><a href="#">Food delivery</a></li>
           <li class="hover"><a href="#">How it works</a></li>
           <li class="hover"><a href="#">Our cities</a></li>
           <li class="hover"><a href="#">Sign up</a></li>
       </ul>
```