Menu css + javascript and jquery

Question

Good guys, I need to create a way to recognize which menu I am clicking on, I have my index where I call my menus with a include, so I need to put a green bar at the bottom of the menu that is clicked.

How to do this ?

<ul class="mainnav">
  <li class="active"><a href="principal.php"><i class="icon-dashboard"></i><span>Início</span> </a> </li>
  <li class="dropdown"><a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-sort"></i><span>Cadastro</span> <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="listaUsuario.php">Usuários</a></li>
      <li><a href="listaPublicacao.php">Publicação</a></li>
      <li><a href="#">Clientes</a></li>
      <li><a href="#">Paginas Internas</a></li>
    </ul>
  </li>
  <li><a href="cadastroMenu.php"><i class="icon-th-list"></i><span>Menu</span> </a></li>
  <li><a href="#"><i class="icon-picture"></i><span>Banner</span> </a> </li>
  <li><a href="#"><i class="icon-book"></i><span>Contatos</span> </a> </li>
</ul>

I just need to add active in the li class that is in selection. An example is

Be able to do, however it activates Active in the class, but it is a few seconds returning only to read marked main, the goal to start the index as Active is for it to appear checked as soon as the site is started, someone has some better idea that will solve this problem.

$(function () {
    $('.mainnav li').on('click', function(){
        $(this).addClass('dropdown active');
        $(this).siblings().removeClass('active');

    });
});

Answer 1

Maybe something like this is what you’re looking for?

$('.dropdown-menu li').on('click', function(){
  $(this).addClass('active');
  $(this).siblings().removeClass('active');
});

li.active{
  color: green;
}

li{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

EDIT:

As we discussed in the comments, and as per the issue of your question (and, honestly, as per the mine understanding her), I made an adjustment in the code above, to get the result I believe you want. So as not to block the answer, I put the code in a thumb drive.

Considerations:

• I used pretty much the same HTML that you posted on your question. I removed things like <a>s and <i>Only to make the code cleaner.
• Use the hover, as quoted by @Sanction in the comments, it seems to me the most natural (and easiest to do) thing. I don’t know if you have any impediment to that.
• The code does not consider (and this also does not enter the scope of your question), as you will do to open your dropdowns, so much that you will see that the class active remains present in the last internal element you clicked, if you click on an external element (I don’t know if you need to treat this). If yes, I believe that this treatment can be done together with the opening of the above dropdowns.

The secret to solve was to put the titles of the items in the first level within a tag <span>. Thus, the selectors became simpler.