My first test

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css">
<link rel="stylesheet" href="https://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <aside class="sidebar">
                <nav class="sidebar-nav">
                    <ul class="metismenu" id="menu">
                        <li>
                            <a href="#" aria-expanded="false">Menu<span class="glyphicon arrow"></span></a>
                            <ul aria-expanded="false">
                                <li><a href="#">item 2.1</a></li>
                                <li><a href="#">item 2.2</a></li>
                                <li><a href="#">item 2.3</a></li>
                                <li><a href="#">item 2.4</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </aside>
        </div>
    </div>
</div>

CSS

#menu a:hover,
#menu a:focus {
    color: #fff;
    background-color: #2a6496;
}

JavaScript

$(function() {

    $('#menu').find("a").focus(function() {
        $('#menu').find("a").each(function() {
            $(this).css("background-color", "initial");
			$(this).css("color", "initial");
        });
        $(this).css("background-color", "#2a6496");
        $(this).css("color", "#fff");
    });

    $('#menu').metisMenu({
        toggle: false // disable the auto collapse. Default: true.
    });
});