<nav class="nav-main mega-menu">
<ul class="nav nav-pills nav-main" id="mainMenu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="page-services.html">
            item4
            <i class="icon icon-angle-down"></i>
        </a>
        <ul class="dropdown-menu">
            <li><a href="">item5</a></li>
            <li><a href="">item6</a></li>
            <li><a href="">item7</a></li>
            <li><a href="">item8</a></li>
            <li><a href="">item9</a></li>
        </ul>
    </li>
    <li><a href="">item10</a></li>
    <li><a href="">item11</a></li>
    <li><a href="">item12</a></li>
</ul>
</nav>

<script type="javascript">
   $('.nav-pills').on('click', 'li', function() {
   $('.nav-pills li.active').removeClass('active');
   $(this).addClass('active');
   });
</script>

<script type="javascript">
   $('.nav-main').on('click', 'li', function() {
   $('.nav-main li.active').removeClass('active');
   $(this).addClass('active');
   });
</script>