Фокус

        $('.nav-top__sp ul li:last-child a').focusout(
                function () {
                        $(this).parents('.nav-top__sp').removeClass('focus-menu');
                }
        );

Вот с этим сложнее, могу только сделать, чтобы при любом клике оно пропадало

        $('*').on('click', function(){
                $('.nav-top__sp').removeClass('focus-menu');
        });

Чтобы за пределами - простого ничего в голову не приходит.

Спасибо большое за подсказку с :last-child. Забыл про неё.

По-поводу клика вне блока подменю нашёл такой вариант. Вроде всё работает. Собственно весь код

$(document).ready(function () {
        $('.nav-top a').focus(
                function () {
                        $(this).parents('.nav-top__sp').addClass('focus-menu');
                }
        );
        $('.nav-top__sp ul li:last-child a:last-child').focusout(
                function () {
                        $(this).parents('.nav-top__sp').removeClass('focus-menu');
                }
        );
        $(document).click(
                function (e) {
                        if (!$('.nav-top__sp ul').is(e.target)) {
                                $('.nav-top__sp').removeClass('focus-menu');
                        };
                });
});

Буду признателен подсказке, если считаете, что что-то не так или лучше сделать по-другому

Да, в вашем случае работает. Благодаря тому, что элемент <li> полностью заполняется элементом <a>. Так что сойдёт.

вам класс нужно добавить или стили какие-то применить? 
Если второе - то вам вообще не нужен js