/**
 * Display active menu item's as inactive when user hovers inactive menu items.
 * Make sure to always refer to elements below #nav, otherwise it may create
 * conflicts with sitemap pages list. 
 */
$(document).ready(function () {
    var active = $('#nav .active').children('span').children('a');
    var active_drop = $('#nav .active .drop');

    var inactive = $('#nav .inactive').children('span').children('a');
    var active_style = {
        'background-image': active.css('background-image'),
        'color': active.css('color')
    };
    var inactive_style = {
        'background-image': inactive.css('background-image'),
        'color': inactive.css('color')
    };
    $('#nav').children('.inactive').hover(function () {
        active.css(inactive_style);
        active_drop.hide();
        $(this).children('.drop').show();   // Required to work on IE7
    }, function () {
        active.css(active_style);
        active_drop.show();
        $('#nav .inactive .drop').hide();    // Required to work on IE7
    });
});