Dropdown language keys available via keyboard

I have the following dropdown that opens when the mouse hovers it:

Now is it possible to open the same dropdown when the user highlights it via the tab key. I've tried learning from this: Selecting div in custom dropdown using Keyboard (Up, down and enter keys)

But this not seems to be working.

Thanks to anyone who can help!

HTML:

<div class="choose_language">
    <a class="btn_choose_language" href="#" title="Change language">
        <abbr title="English">EN</abbr>
        <img alt="" height="11" src="/assets/nav_btn_choose_language.png" width="15">
    </a>
    <ul class="radius5" style="overflow: hidden; display: none;">
        <li>
            <a href="/jobs?locale=fr">
                <abbr title="Français">FR</abbr>
            </a>
        </li>
        <li>
            <a href="/jobs?locale=nl">
                <abbr title="Nederlands">NL</abbr>
            </a>
        </li>
    </ul>
</div>

JS:

$(document).ready(function () {

    /* =============================================================================
   PORTAL NAV -> highlight clicked element + show/hide and equalize heights of Main Nav level 2
   ========================================================================== */
    $('header nav#nav > ul li a h3, header nav#nav-mystib > ul li a h3').click(function(e) {
        e.stopImmediatePropagation();
        //alert($(this).html())
        if(e.target != this) return;
        //hide choose_language box
        $('.choose_language').children('ul').hide();
        //hide every context box except clicked one
        $('.context_box').not($(this).parent().parent().children('.context_box')).fadeOut(100);
        //hide more_info box and .my_space box if open
        $('.my_space .more_info_box, .my_space .opened').hide();
        //show/hide THIS context box
        $(this).parent().parent().children('.context_box').fadeToggle(0);
        //set level2 columns at same height
        $(this).parent().parent().children('.context_box').children(".level2_links").children(".col:lt(5)").equalHeights();
        $(this).parent().parent().children('.context_box').children(".level2_links").children(".col:gt(4)").equalHeights();
        //reset the selected item
        $('#nav_item li').removeClass('selected');
        //select the current item
        $(this).parent().parent().addClass('selected');
    });

    /* =============================================================================
    NAV -> highlight clicked element
   ========================================================================== */
    $('header nav#nav-mystib > ul li a h3').click(function() {
        //reset the selected item
        $('#nav-mystib_item li').removeClass('selected');
        //select the current item
        $(this).parent().parent().addClass('selected');
    });


    // Nav -> show/hide language selector
    $('.choose_language').hover(function() {
      if (detectmob()) { return;}
      $('.choose_language ul').slideToggle(200)
    });
    /* open mySpace*/
    $('.my_space .closed').click(function() {
        $('.my_space .opened').show()
        return false;
    });
    /* close mySpace*/
    $('.my_space .opened .btn_close').click(function() {
        $('.my_space .opened').hide();
        return false;
    });

    $('.my_space .info').click(function(e) {
        e.stopImmediatePropagation();
        //hide choose_language box
        $('.choose_language').children('ul').hide();
        //hide every context box
        $('.context_box').hide();
        $('.my_space .more_info_box').fadeToggle(200)
    });


    // Hide context_box, .more_info_box when click outside of it
    $(".context_box, .more_info_box").bind( "clickoutside", function(){
        $(this).hide();
    });
    $(".choose_language").bind( "clickoutside", function(){
      if (detectmob()) { return;}
        $(this).children('ul').hide();
    });


    // Hide context_box, .more_info_box when mouse is outside of it
    $(".context_box, .more_info_box").hover(function(){
        var el=this;
        $(el).stop(true,false)
    },function(){
        var el=this;
        $(el).delay(700).hide(10)
    });

});// end of dom ready

you can do it like this:

You check if the element got focus, and then show it via jQuery.

You can also use blur to check if the element lost focus and hide the drop-down (I added the class last to the last li element, you can do it in a variety of ways).

<a href="/jobs?locale=nl" class="last">

$(document).ready(function () {
    $( ".btn_choose_language" ).focus(function() {
      $( ".radius5" ).show();
    });
    $( ".last" ).blur(function() {
      $( ".radius5" ).hide();
    });
});// end of dom ready