Drop Down Menu Box with search and focus using JQuery

Show / Hide menu using JQuery and CSS to make a tab with drop down. ~ apougher

HTML

<link href="http://fonts.googleapis.com/css?family=Syncopate:regular" rel="stylesheet" type="text/css">

<h1>Drop Down Menu</h1>

<div id="container"> <a href="#" id="opener">open</a>

    <div id="menu">Enter Search term
        <br />
        <input value="" placeholder="search" id="search" type="text" />
        <br />
        <button id="do">search</button>
    </div>
</div>

CSS

body {
    background:#232323
}
#opener {
    display: inline-block;
    background: #eee;
    padding: 8px 10px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
input[type="text"] {
    border:1px solid #a5a5a5;
    margin-right: 12px;
    padding:5px;
    -webkit-box-shadow:0 1px 0 #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0 1px 0 #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow:0 1px 0 #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.1);
}
#menu {
    font-size:11px;
    width: auto;
    padding:12px;
    background: #efeccc;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}
#container {
    padding:12px;
    display: inline-block;
}
h1 {
    font:bold 55px/50px'Syncopate';
    letter-spacing: -2px;
    font-variant:small-caps;
    color:#57ABE6;
    text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb, 4px 4px 0 #b9b9b9, 5px 5px 0 #aaa, 6px 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 1px 1px 3px rgba(0, 0, 0, .3), 3px 3px 5px rgba(0, 0, 0, .2), 5px 5px 10px rgba(0, 0, 0, .25), 10px 10px 10px rgba(0, 0, 0, .2), 20px 20px 20px rgba(0, 0, 0, .15);
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

JavaScript

$("#menu").hide().hover(function () {
    $(this).data("hover", true);
    $(this).show();
}, function () {
    $(this).data("hover", false);
    $(this).slideUp(200);
});


$("#opener").hover(function () {
    $("#menu").slideDown();
    $("#search").focus()
}, function () {
    setTimeout(function () {
        var menuHovered = $("#menu").data("hover");
        if (!menuHovered) {
            $("#menu").slideUp(200);
        }
    }, 50);
});

$("#do").click(function () {
    alert($("#search").val())
});