How do I leave the page open in the menu?

.active > a {
color:red;
}

It's the best way

This gives javascript, you can do this depending on the page you are on:

ex HTML:

<nav>
   <ul>
      <li class="home">
          <a href="#">Home</a>
      </li>
      <li class="sobre_nos">
          <a href="#">Sobre nós</a>
      </li>
      <li class="serviços">
          <a href="#">Serviços</a>
      </li>
   </ul>
</nav>

CSS: This is where you put the properties you want in the active item (page where you are) in the

.menu_active {
    color: red;
    text-decoration: underline;
}

Now we'll need javascript. If for example you are on page about noś:

JQUERY:

$('li.sobre_nos > a').addClass('menu_active');

This is processed via css. Add this css to your page and make the necessary ID and Class adaptations. In this demo site the skin.css file has the css of the page in question. The css is:

  /* NAVIGATION ------------------------------------------------------------*/
#nav > li > a {
  color: #dcd2be;
}
#nav > li:hover > a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-top: 3px solid #fff;
}
#nav span:hover {
  -webkit-transform: translate(-10px, -3px);
  -moz-transform: translate(-10px, -3px);
  -o-transform: translate(-10px, -3px);
  transform: translate(-10px, -3px);
}
#nav > li.current-menu-item > a,
#nav > li.current_page_item > a {
  border-top: 3px solid #009AD5;
}
#nav .sfHover ul {
  background: #f8f5f2;
}
#nav .sfHover ul li a {
  color: #333;
  font-size:13px;
}
#nav .sfHover ul li a:hover {
  background: #e5e5e5;
  color: #333;
  font-size:13px;
}

You will need to use JavaScript to add new formatting to your menu.

First, you compare the value of the href attribute of the clicked link with the current URL , if they are equal, then you add the formatting with CSS to the corresponding menu.

The following example adds the class .active when clicking the link, but does not compare the values of href with URL :

$(document).ready(function () {
    $('a').click(function () {
        $('.hmenu').find('li.active').removeClass('active');
        $(this).parents("li").addClass('active');
    });
});

.active > a {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><divid="menu1" class="hmenu">
    <ul>
        <li><a href="#">Item1</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
                <li><a href="#">SubItem2</a> </li>
                <li><a href="#">SubItem3</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br style="clear: left" />
</div>

JSFiddle from above example.

Example comparing href values with URL

Example with a one-page site