Is this what you want? Note that this will only work like this when you've clicked on the element.. if you click anywhere else on the page it will unfocus. The difference here being adding the tabindex

Code:
<html>
    <head>
        <style type="text/css">
        a:hover {
            color: #d63a3a;
        }

        .categories li {
            font-size: 22px;
            font-weight: 600;
            margin: 3px 25px;
            text-align: center;
            display: inline-block;
            text-shadow: 1px 1px #026cab;
            color: #fff;
        }

        .categories li:link,
        .categories li:visited {
            color: #d63a3a;
            padding-bottom: 3px;
            border-bottom: 3px solid transparent;
        }

        .categories li:active,
        .categories li:hover,
        .categories li:focus {
            color: #d63a3a;
            transition: border-bottom 0.3s;
        }
        </style>
    </head>
    <body>
        <ul class="categories">
            <li tabindex="0">Test1</li>
            <li tabindex="1">Test2</li>
        </ul>
    </body>
</html>