Solution 1 :

The :focus pseudo-class is used to style elements as long as it has received focus, either by clicking on it or using the tab key. As soon as you click somewhere else or use the tab key to navigate, the previously focused element loses focus.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

To highlight the active page, give it a css class (eg. .current-page) and give it some extra styling:

ul.SideNav_Main {
    font-weight: bold;
    background-color: #ebf6f9;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    height: 100%;
    border-right: 1px solid #e6e6e6;
    position: fixed;
    overflow: auto;
}

ul.SideNav_Main li a {
    text-decoration: none;
    color: #2e849e;
    padding: 10px 20px;
    display: block;
}


ul.SideNav_Main li a.current-page:not(.Active):not(.Logout) {
    background-color: #ffdb99;
}

ul.SideNav_Main ul.SideNav_Sub {
    font-size: 10px;
    font-weight: normal;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: auto;
}
<ul class="SideNav_Main">
    <li><a class="Active" href="yPage.php?ID=30000" target="_iframe">HOME</a></li>

    <li>
        <a href="#">RaspLot</a>
        <ul class="SideNav_Sub" id="T101">
            <li><a href="yPage.php?ID=10101" target="_iframe">Controlo Diário</a></li>
            <li><a href="yPage.php?ID=10102" target="_iframe" class="current-page">Balanços</a></li>
            <li><a href="yPage.php?ID=10103" target="_iframe">Consultar Artigos</a></li>
            <li><a href="yPage.php?ID=10104" target="_iframe">Inserir Artigos</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Segurança</a>
        <ul class="SideNav_Sub" id="T301">
            <li><a href="yPage.php?ID=30101" target="_iframe">Alterar Password</a></li>
            <li><a href="yPage.php?ID=30102" target="_iframe">Alterar eKey</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Master</a>
        <ul class="SideNav_Sub" id="T398">
            <li><a href="yPage.php?ID=39801" target="_iframe">Registry Access</a></li>
            <li><a href="yPage.php?ID=39802" target="_iframe">Registry Alert</a></li>
            <li><a href="yPage.php?ID=39803" target="_iframe">Explorer SSID</a></li>
            <li><a href="yPage.php?ID=39899" target="_iframe">Print_r</a></li>
        </ul>
    </li>

    <li><a class="Logout" href="yPage.php?ID=39900" target="_parent">Logout</a></li>
</ul>

Problem :

How can i prevent my ul.SideNav_Main li a:focus class, loss the focus when i’m click on the iframe or other place in the page? Wasn’t supposed as a:focus it keeps forever focus until i click in other URL of the list?

It’s possible to solve with pure CSS? Or maybe with some JavaScript code?

My CSS:

ul.SideNav_Main {
    font-weight: bold;
    background-color: #ebf6f9;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    height: 100%;
    border-right: 1px solid #e6e6e6;
    position: fixed;
    overflow: auto;
}

ul.SideNav_Main li a {
    text-decoration: none;
    color: #2e849e;
    padding: 10px 20px;
    display: block;
}


ul.SideNav_Main li a:focus:not(.Active):not(.Logout) {
    background-color: #ffdb99;
}

ul.SideNav_Main ul.SideNav_Sub {
    font-size: 10px;
    font-weight: normal;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: auto;
}

My HTML:

<ul class="SideNav_Main">
    <li><a class="Active" href="yPage.php?ID=30000" target="_iframe">HOME</a></li>

    <li>
        <a href="#">RaspLot</a>
        <ul class="SideNav_Sub" id="T101">
            <li><a href="yPage.php?ID=10101" target="_iframe">Controlo Diário</a></li>
            <li><a href="yPage.php?ID=10102" target="_iframe">Balanços</a></li>
            <li><a href="yPage.php?ID=10103" target="_iframe">Consultar Artigos</a></li>
            <li><a href="yPage.php?ID=10104" target="_iframe">Inserir Artigos</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Segurança</a>
        <ul class="SideNav_Sub" id="T301">
            <li><a href="yPage.php?ID=30101" target="_iframe">Alterar Password</a></li>
            <li><a href="yPage.php?ID=30102" target="_iframe">Alterar eKey</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Master</a>
        <ul class="SideNav_Sub" id="T398">
            <li><a href="yPage.php?ID=39801" target="_iframe">Registry Access</a></li>
            <li><a href="yPage.php?ID=39802" target="_iframe">Registry Alert</a></li>
            <li><a href="yPage.php?ID=39803" target="_iframe">Explorer SSID</a></li>
            <li><a href="yPage.php?ID=39899" target="_iframe">Print_r</a></li>
        </ul>
    </li>

    <li><a class="Logout" href="yPage.php?ID=39900" target="_parent">Logout</a></li>
</ul>

When i Click gets focus

When i Click in other place of page, it losses focus

Comments

Comment posted by Zac

You can have only one focused element at any time, but if you need to focus on other elements and keep the previous one looks focused you need to think about another approach, maybe you can use

Comment posted by Frederico

I need to get focus on the last url that i clicked, and keep it while i work on my iframe on the right side.

Comment posted by Frederico

This solution doesn’t work for my. I need to keep my last li clicked Alive while i work on the iframe o the rightside.

Comment posted by CSS Flexbox

You’d have to use JavaScript (or any js framework) to catch click events and set the

By