A simple yet smooth full-fledged jQuery dropdown menu that works across all modern browsers.

menu.html

<nav id="access">
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a>
            <ul class="sub-menu">
                <li><a href="#">Page 1.1</a></li>
                <li><a href="#">Page 1.2</a></li>
                <li><a href="#">Page 1.3</a></li>
                <li><a href="#">Page 1.4</a></li>
                <li><a href="#">Page 1.5</a></li>
                <li><a href="#">Page 1.6</a></li>
            </ul>
        </li>
        <li ><a href="#">Page 2</a>
            <ul class="sub-menu">
                <li><a href="#">Page 2.1</a>
                    <ul class="sub-menu">
                        <li><a href="#">Page 2.1.1</a></li>
                        <li><a href="#">Page 2.1.2</a></li>
                        <li><a href="#">Page 2.1.3</a></li>
                        <li><a href="#">Page 2.1.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2.2</a></li>
                <li><a href="#">Page 2.3</a>
                    <ul class="sub-menu">
                        <li><a href="#">Page 2.3.1</a></li>
                        <li><a href="#">Page 2.3.2</a></li>
                        <li><a href="#">Page 2.3.3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2.4</a>
                    <ul class="sub-menu">
                        <li><a href="#">Page 2.4.1</a></li>
                        <li><a href="#">Page 2.4.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li ><a href="#">Page 3</a></li>
        <li ><a href="#">Page 4</a></li>
        <li ><a href="#">Page 5</a></li>
    </ul>
</nav>

script.js

/*
   Add dropwdown menu
*/

$(document).ready(function() {

    // Add an arrow inside of the link when JS is enabled
    $("ul.sub-menu").siblings('a').append('<span class="arrow"></span>');

    $("#access ul.menu > li a").hover(function() {
    
        $(this).closest('li').find("ul.sub-menu:first").fadeIn('fast'); //Drop down the subnav on click
        
        $(this).parent().hover(function() {
            // do nothing
        }, function(){
            //When the mouse hovers out of the subnav, move it back up
            $(this).parent().find("ul.sub-menu").fadeOut('fast');
        });
    
        $(this).parent().addClass("subhover");

    }, function(){

        $(this).parent().removeClass("subhover");

    });
    
});

style.css

/*
    This CSS assumes you are using IE-conditionals to detect browser version.
    In this case I'm using the classes 'ie8' and 'ie9'.
*/

#header #access {
    float: right;
    clear: both;
    background-color: #666;
    width: 820px;
    padding-left: 80px;
    z-index: 9999;
}

#header #access .menu,
#header #access ul,
#header #access li {
    float: left;
    display: block;
    z-index: 9999;
}

#header #access li a {
    color: #eee;
    text-decoration: none;
    display: block;
    padding: .5em .66em;
    margin: .25em 0;
    line-height: 1.2em;
    border-right: 1px solid #888;
    font-size: 1em;
    font-weight: normal;
}

#header #access .sub-menu a {
    border-right: none;
}

#header #access li:last-child a {
    border-right: none;
}

#header #access li a:hover {
    color: #fff;
    background-color: #777;
}

/* Drop down menu */

#access ul.menu {
    margin: 0;
    padding: 0;
}

#access ul.menu li {
    float: left;
    list-style: none;
    position: relative;
}

#access ul.menu li a  {
    float: left;
}

#access ul.menu li a span.arrow {
    float: right;
    width: 16px;
    height: 16px;
    margin-left: .5em;
    background: transparent url(images/menu_arrow.png) no-repeat top left;
}

#access ul.menu li ul.sub-menu li a span.arrow {
    background-image: url(images/menu_arrow_sub.png);
}

#access ul.menu li a:hover {
    color: #fff;
}

#access ul.menu li.current-menu-item {
    background: transparent;
}

#access .current-menu-item > a {
    color: #fff;
    background-color: #888;
}

#access ul.menu li ul.sub-menu {
    display: none;
    margin: 2.66em 0 0 0;
    padding: 0;
    position: absolute;
    background: #555;
    border: 1px solid #444;
    -webkit-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    -moz-box-shadow: -1px 1px 4px rgba(66,66,66,1);
    box-shadow: -1px 1px 4px rgba(66,66,66,1);
}
       
.ie9 #access ul.menu li ul.sub-menu,
.ie8 #access ul.menu li ul.sub-menu {
    margin: 2.66em 0 0 0;
}

#access ul.menu li ul.sub-menu ul.sub-menu,
#access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    display: none;
    z-index: 1;
    float: left;
    top: -2.66em;
    left: 10em;
}

.ie9 #access ul.menu li ul.sub-menu ul.sub-menu,
.ie9 #access ul.menu li ul.sub-menu ul.sub-menu ul.sub-menu {
    float: left;
    top: -3em;
}

#access ul.menu li ul.sub-menu li {
    display: inline;
    float: right;
    clear: both;
}

.ie9 #access ul.menu li ul.sub-menu li,
.ie8 #access ul.menu li ul.sub-menu li {
    display: block;
    float: right;
    clear: none;
}

#access ul.menu li ul.sub-menu li a {
    width: auto;
    color: #ddd;
    background-image: none;
    width: 128px;
}

#access ul.menu li ul.sub-menu li a:hover {
    background-color: #666;
    color: #fff;
}