Simple way to make current menu as different color using jquery

In your Master page you can add this code.

  <script type="text/javascript">

        $(document).ready(function () {

            var activeMenu = $('#activeSubMenu').val();

            $('#subMenu li').each(function () {
                var currentVal = $(this).attr('id');
                if (currentVal == activeMenu) {
                    $(this).addClass('ActiveMenu');
                } else {
                    $(this).removeClass('ActiveMenu');
                }
            });

        });

</script>

<ul id="subMenu">
            <li id="module">
                <a id="A7" runat="server" href="~/Settings/Modules.aspx">
                Modules</a></li>
            <li id="operation">
                <a id="A8" runat="server" href="~/Settings/Operation.aspx">Operations</a></li>
            <li id="role">
                <a id="A9" runat="server" href="~/Settings/Role.aspx">Roles</a></li>
</ul>

In this <li> id's i have given the name as module, operation, role.

In this each page Modules.aspx, Operation.aspx, Role.aspx you can add hidden field like wise

    <input type="hidden" id="activeSubMenu" value="module" />. Here you can gave the value is SubMenu <li> id values.

for ex.

 In Modules.aspx,

    <input type="hidden" id="activeSubMenu" value="module" />

 Operation.aspx, 

    <input type="hidden" id="activeSubMenu" value="operation" />

Role.aspx

    <input type="hidden" id="activeSubMenu" value="role" />

In CSS

.ActiveMenu
{
background-color: #AAD4FF !important;
font-weight: 600;
}