Stylized select list

a stylized select box that populates a hidden select

HTML

<html>
    <head>
    </head>
    <body>
        <header>
            <select>
                <option value="1" selected="selected">Slow</option>
                <option value="2">AverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverageAverage</option>
                <option value="3">Fast</option>
            </select>   
            <br />            
            <nav id="navigation" class="hasHover hasDropDowns">
                <ul>
                    <li>
                        <a title="Tab 1" href="#">Slow</a>
                        <ul>
                            <li>
                                <a title="Tab 1: Sub Item 2" href="1">
                                    Slow
                                </a>
                            </li>
                            <li>
                                <a title="Tab 1: Sub Item 2" href="2">
                                    Average
                                </a>
                            </li>
                            <li>
                                <a title="Tab 1: Sub Item 3" href="3">
                                    Fast
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <div id="content">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quicquid porro animo 
            cernimus, id omne oritur a sensibus; Mihi quidem Antiochum, quem audis, satis 
            belle videris attendere. Multa sunt dicta ab antiquis de contemnendis ac despiciendis
            rebus humanis; Audax negotium, dicerem impudens, nisi hoc...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{
    Margin:1em;
}
            
#navigation {
     position: relative; 
     margin: 1.5em 0 2em; 
     background: #999;
     -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
             border-radius: 5px;
     display: inline-block;
}

#navigation:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    margin: -1px 0 0 -1px;
    border: 1px solid #333; 
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
            border-radius: 10px;
    
}

#navigation a {
    color: #eee;
    text-decoration: none;
}

#navigation > ul {
    text-align: center; 
    padding: 0 0.5em;
    position: relative;
    border-top: 1px solid #ccc;
    border-left: 1px solid #aaa;
    border-right: 1px solid #555;
    border-bottom: 1px solid #000
    background: #000;
    background-color: #666;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333)); /* Saf4+, Chrome */
    background-image:...

JavaScript

$(function() {
    var nav = document.getElementById('navigation');
    // Removes fallback CSS dropdown 
    $(nav).removeClass('hasHover');
    // If li has a nested ul, add class
    $('li > ul', nav).addClass('dropDown').parent('li').addClass('hasTrigger');

    var dropDown = $('.dropDown');
    var downArrow = '&#9660;',
        upArrow = '&#9650;'; // creates HTML arrows
    $('li > ul', nav).parent().children('a').after('<span class="dropDownTrigger"><a class="disclosureArrow" tabindex="-1" title="This triggers a Drop-Down Menu for Sub-Sections" href="#">' + downArrow + '</a></span>');

    var arrow = $('.disclosureArrow', nav);

    $('.hasTrigger', nav).click(function(e) {

        if (dropDown.is(':visible')) {

            dropDown.slideUp(100);
            dropDown.parent().find(arrow).html(downArrow);

        }

        var subMenu = $(this).parent().find(dropDown);
        if (subMenu.is(':hidden')) {

            subMenu.slideDown(400);
            subMenu.parent().find(arrow).html(upArrow);

        } else {

            subMenu.slideUp(100);
            subMenu.parent().find(arrow).html(downArrow);

        }
        return false;

    });
    $('a', nav).focus(function() {

        var subMenu = $(this).parent('li').children('.dropDown');
        subMenu.slideDown(400);
        subMenu.parent().find(arrow).html(upArrow);

    });
    $('a', nav).parent().delegate(".dropDown li:last-child a", "blur", function() {

        var subMenu = $(this).parent().parent(dropDown);
        subMenu.slideUp(100);
        subMenu.parent().find(arrow).html(downArrow);

    });
    $('body').click(function() {

        if (dropDown.is(':visible')) {

            dropDown.slideUp(100);
            dropDown.parent().find(arrow).html(downArrow);

        }
    });
    $('li', dropDown).click(function(e) {
        $(this).parent().siblings('a').text($(this).children('a').text());
    $(this).closest('.hasDropDowns').siblings('select')
       ...