Accessible, lightweight drop down menus. http://jsfiddle.net/beaucharman/X2ArC/

jquery.accessibleDropDownMenu.js

/**
 * accessibleDropDownMenu.js
 *
 * jquery.accessibleDropDownMenu.js
 * @version   2.0 | 14th January 2014
 * @author    Beau Charman | @beaucharman | http://www.beaucharman.github.io
 * @link      https://gist.github.com/beaucharman/7348970 | 
 *            http://jsfiddle.net/beaucharman/X2ArC/
 * @license   MIT license
 */
 
;(function ($) {

    "use strict";

    $.fn.accessibleDropDownMenu = function (options) {

         var settings = $.extend({
            'item': 'li',
            'anchor': 'a'
        }, options);

        /* Grab the element instance */
        var menu = $(this);

        /* Drop down menu support for IE 6 */
        $(settings.item, menu).mouseover(function () {

            $(this).addClass('focus');

        }).mouseout(function () {

            $(this).removeClass('focus');
        });

        /* Drop Down menu keyboard accessible via :focus */
        $(settings.anchor, menu).focus(function () {

            $(this).parents(settings.item).addClass('focus');

        }).blur(function () {

            $(this).parents(settings.item).removeClass('focus');
        });

    };

})(jQuery);

main.js

/**
 * usage
 */
;(function ($) {
  
    $(".drop-down-menu_accessible").accessibleDropDownMenu();
  
})(jQuery);

menu-partial.html

<nav class="nav drop-down-menu_accessible">
    
    <ul class="ul">
        
        <li class="li">
            
            <a class="a" href="#">Item</a>           
        </li> 
        
        <li class="li current-menu-item">
            
            <a class="a" href="#">Item</a>  
            
            <ul class="sub-ul">
                
                <li class="sub-li">
                    
                    <a class="sub-a" href="#">Item</a>       
                </li>  
                
                <li class="sub-li">
                    
                    <a class="sub-a" href="#">Item</a>   
                </li>  
            </ul>     
        </li>
        
        <li class="li">
            
            <a class="a" href="#">Item</a>  
            
            <ul class="sub-ul">
                
                <li class="sub-li">
                    
                    <a class="sub-a" href="#">Item</a>        
                </li>  
                
                <li class="sub-li">
                 
                    <a class="sub-a" href="#">Item</a>            
                </li>  
            </ul>
        </li> 
    </ul>
</nav>

style.css

/**
 * Collapsible horizontal list
 */
 
/*ul*/.list--horizontal {
    list-style-type: none;
    padding-left: 0;
}
    
    li,
    .list-item {
        margin-right: 1.5em;
        margin-bottom: 0;
        float: left;
    }
        
        li:last-child,
        .list-item:last-child {
            margin-right: 0;
        }
 
/* Clearfix */
.clearfix {
    *zoom: 1;
}
    .clearfix :before,
    .clearfix :after {
        content: " ";
        display: table;
    }
 
    .clearfix :after {
        clear: both;
    }


 
/**
 * Dropdown navigation
 */
         
/*nav*/.nav { }
 
    .nav .ul {
        width: 100%;
        position: relative;
        z-index: 5;
    }
 
    /**
     * Parent menu item
     */
    .nav .li {
        position: relative;
    }

    .nav a, 
    .nav a:link, 
    .nav a:visited {
                
    }        

    .nav a:hover,
    .nav a:focus{
      
    }
        
    .nav a:active {
        
    }
            
        /**
         * Sub navigation
         */
        .nav .sub-ul {
            position: absolute;
            left: -9999px;
                
            padding-top: 0.25em; /* Slight Offset */
            box-shadow: 0 6px 8px -8px #000; /* Optional depth */
            list-style: none;
            padding-left: 0;
        }
     
        /**
         * Child menu item
         */
        .nav .sub-li {
            float: none;
        }

        /* Child item anchor */
        .nav .sub-a {
            white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
            display: block;
            min-width: 160px;
        }
    
            /* Bring the sub navigation in */
            .nav .sub-a:hover .sub-ul,
            .nav .sub-a.focus .sub-ul {
                left: 0;
            }
     
            /* Optional fix for right browser edge navigation elements */
            .nav .sub-a:last-child:hover .sub-ul,
            .nav .sub-a:last-child.focus .sub-ul {
                //left: -$160px;
            }
            

style.scss

/**
 * Collapsible horizontal list
 */
 
/*ul*/.list--horizontal {
    list-style-type: none;
    padding-left: 0;
    
    li,
    .list-item {
        margin-right: 1.5em;
        margin-bottom: 0;
        float: left;
     
        &:last-child {
            margin-right: 0;
        }
    }
 }
 
/* Clearfix */
%clearfix {
    *zoom: 1;
 
    &:before,
    &:after {
        content: " ";
        display: table;
    }
 
    &:after {
        clear: both;
    }
}


 
/**
 * Set a nav item max width 
 * Used with the offset helper as well
 */
$item-max-width: 160px;
 
/**
 * Dropdown navigation
 */
         
/*nav*/.nav {
 
    /*ul*/.ul {
 
        @extend %clearfix;
        @extend .list--horizontal; /* List style and floa stuff */
 
        width: 100%;
        position: relative;
        z-index: 5;
 
        /**
         * Parent menu item
         */
        .li {
            position: relative;
 
            .a {
     
                &, 
                &:link, 
                &:visited {
                            
                }        
        
                &:hover,
                &:focus{
                  
                }
                    
                &:active {
                    
                }
            }
 
            /**
             * Sub navigation
             */
            .sub-ul {
                position: absolute;
                left: -9999px;
                    
                padding-top: 0.25em; /* Slight Offset */
                box-shadow: 0 6px 8px -8px #000; /* Optional depth */
                list-style: none;
                padding-left: 0;
     
                /**
                 * Child menu item
                 */
                .sub-li {
                    float: none;
     
                    /* Child item anchor */
                    .sub-a {
                        white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
                        display: block;
                        min-width: $item-max-width;
                    }
                }
            }
     
            /* Bring the sub navigation in */
            &:hover .sub-ul,
            &.focus .sub-ul {
                left: 0;
            }
     
            /* Optional fix for right browser edge navigation elements */
            &:last-child:hover .sub-ul,
            &:last-child.focus .sub-ul {
                //left: -$item-max-width;
            }
        }
    }
}