JSFiddle: Drop Down Menu with jQuery

https:////example.com/style.css X

#menu_wrapper {
    height:44px;
    background: url(https://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNeDrOC4g6uoP55DSLpZ73uIvh8OjYydoXjpDmtOTzUNf7TPA96bd-iiqbDygI9FBFrXSTH9_1kC6teQzPPLgj3dzZfeG38y7QktYFs9BkTtjS7xVXvlddN7gKV1Q0xHpGsHAP1SzaDE/s1600/navbar-bg.png) repeat-x;
    width: 960px;
    margin: 0 auto;
    padding: 0 auto;
    border-bottom: 1px solid #f89c21;
}

#menu_bar {
    width: 960px;
    height: 27px;
    margin: 0 auto;
}

#menu {
    width: 100%;
}

#menu,#menu ul {
    list-style: none;
    font-family: Arial, serif;
    margin: 0;
    padding: 0;
}

#menu a {
    display: block;
    text-decoration: none;
    font: normal 11px Arial;
    text-transform: none;
    color: #CECECF;
    border-right: 1px solid #484747;
    border-left: 1px solid #191919;
    padding: 7px 10px 7px;
}

#menu a.arrow {
    background-image: url(https://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CpiKUwz6z31-UT9imR5p0KO-bRFT3p4kPrjhBw_MYK4jjLsj7Ps1YTXezEonqXa7xBRFNxj_bd6hAB5qeHXQMKievKho15Pg6Ez2NiI3PBiV1M0NbXpok6opcVq1aWChEMUx_7G9Gz4/s1600/arrow_white.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding: 7px 24px 7px 10px;
}

#menu li {
    float: left;
    position: static;
    width: auto;
}

#menu li ul,#menu ul li {
    width: 170px;
}

#menu ul li a {
    text-align: left;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    font-family: Arial;
    border: none;
    padding: 5px 10px;
}

#menu li ul {
    z-index: 100;
    position: absolute;
    display: none;
    background: #222;
    padding-bottom: 0px;
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}

#menu li:hover a,#menu a:active,#menu a:focus,#menu li.hvr a {
    background-color: #222;
    color: #fff;
}

#menu li:hover ul,#menu li.hvr ul {
    display: block;
}

#menu li:hover ul a,#menu li.hvr ul a {
    color: #edfdfd;
    background-color: transparent;
    text-decoration: none;
}

#menu li ul li.hr {
    border-bottom: 1px solid #444;
    border-menu: 1px solid #000;
    display: block;
    font-size: 1px;
    height: 0;
    line-height: 0;
    margin: 0px 0;
}

#menu ul a:hover {
    background-color: #555!important;
    color: #fff!important;
    text-decoration: none;
}

#menu a span,#menu a.arrow span {
    font: bold 12px Arial;
    color: #888;
    display: block;
    line-height: 16px;
    text-transform: uppercase;
    text-shadow: 1px 2px 2px #000;
}

#menu li:hover a span,#menu li:hover a.arrow span {
    color: #f8a932;
}

https:////example.com/script.js X

<div id='menu_wrapper'>
    <div id='menu_bar'>
        <ul id='menu'>
            <li><a href='/'><span>Welcome</span>Homepage</a>
            </li>
            <li><a href='#'><span>This is</span>About Us</a>
            </li>
            <li><a class='arrow' href='#'><span>Support</span>Contact Us</a>

<ul>
                    <li><a href='#'>Sub Menu 1</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 2</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 3</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 4</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 5</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 6</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 7</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 8</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 9</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'><span>Action</span>Big surprise</a>
            </li>
            <li><a href='#'><span>Culture</span>Documentary</a>
            </li>
            <li><a class='arrow' href='#'><span>Box Office</span>The best movie</a>

<ul>
                    <li><a href='#'>Sub Menu 1</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 2</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 3</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 4</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 5</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 6</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 7</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 8</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 9</a>
                </ul>
            </li>
            <li><a href='#'><span>Horror</span>Watch your back</a>
            </li>
            <li><a href='#'><span>Best Seller</span>People likes</a>
            </li>
            <li><a class='arrow' href='#'><span>Cartoon</span>Animated movie</a>