Highcharts Demo

author(s): Torstein Hønsi

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<ul class="menu">
    <li> <a href="#">Fitness</a>

    </li>
    <li> <a href="#">Literature</a>

    </li>
    <li> <a href="#">Music</a>

    </li>
    <li> <a href="#">Fine Art</a>
            <ul>
                <li><a href="#">Paintings</a></li>
                <li><a href="#">Sculptures</a></li>
        </ul>
    </li>
    <li> <a href="#">Food</a>

    </li>
</ul>

CSS

.menu {
    width : 100px;
}

.menu .ui-menu-item.selected { 
    background-color : red;
}

.menu .ui-menu-item.selected > .ui-state-focus,
.menu .ui-menu-item.selected > .ui-state-active
{
    background-color: red ;
    background-image: none;
}

JavaScript

$(document).ready(function () {
    $(".menu").menu({
        select: function (event, ui) {
            $('.selected', this).removeClass('selected');
            ui.item.addClass('selected');
        }
    });

});