Debounce menu

by vpetrychuk

HTML

<script src="http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"></script>
<body>
    	<h1 id='title'>Welcome to My Site</h1>

    <div id='menu_Bar'>
        <div class='selector'>
            <p class='sel_name'>Home
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>
                        </li>
                        <li><a href=''>option 2</a>
                        </li>
                        <li><a href=''>option 3</a>
                        </li>
                        <li><a href=''>option 4</a>
                        </li>
                        <li><a href=''>option 5</a>
                        </li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>Shows
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>
                        </li>
                        <li><a href=''>option 2</a>
                        </li>
                        <li><a href=''>option 3</a>
                        </li>
                        <li><a href=''>option 4</a>
                        </li>
                        <li><a href=''>option 5</a>
                        </li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>Search
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>
                        </li>
                        <li><a href=''>option 2</a>
                        </li>
                        <li><a href=''>option 3</a>
                        </li>
                        <li><a href=''>option 4</a>
                        </li>
                        <li><a href=''>option 5</a>
                        </li>
                    </ul>
        </div>
    ...

CSS

html {
    width: 99%;
    height: 99%;
}
body {
    width: 99%;
}
#title {
    text-align: center;
    font-size: 280%;
    margin: auto;
    background-color: red;
}
#menu_Bar {
    margin: 0.01%;
}
.sel_name {
    font-size: 70%;
    text-align: center;
}
.empty {
    list-style: none;
}
.options {
    display: none;
    background-color: lightblue;
}
.selector {
    background-color: transparent;
    display: block;
    width: 19%;
    float: left;
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    var toggle = function (show) {
        return function () {
            var $el = $(this);
            var isHovered = $el.is(':hover');
            var animation = show && isHovered ? 'slideDown' : 'slideUp';
            $el.children('ul').stop()[animation]('fast');
        };
    }
    var mouseenter = $.debounce(400, toggle(true));
    var mouseleave = toggle(false);
    $('.selector')
        .on('mouseenter', mouseenter)
        .on('mouseleave', mouseleave);
});