Проблемы с выпадающим списком навигации по CSS

Возьмите, так что проблема с моим падением. Его единственный выпадающий список, но мне не очень повезло с ним. Если я или пользователь, где можно покрыть категории, отобразится ниже "ul" вместе с его дочерними элементами "li" и "a". Однако это не работает. Наведение по категориям вызывает меню, но те, которые вы пытаетесь переместить мышь в меню, которое он скрывает.

Компонент HTML

<header role="header">
    <div class="frame">
        <nav role="navigation" class="bit-1">
            <ul>
                <li> <a href="" class="brand">Tutor <span>Hive</span></a>

                </li>
                <li> <a href="#" class="cat">Categories</a>

                    <ul class="cat-drop">
                        <li> <a href="/cat/all">All Categories</a>
 <a href="/cat/math">Math</a>
 <a href="/cat/biology">Biology</a>
 <a href="/cat/sciences">Sciences</a>
 <a href="/cat/chemistry">Chemistry</a>
 <a href="/cat/physics">Physics</a>
 <a href="/cat/business">Business</a>
 <a href="/cat/health">Health & Medicine</a>
 <a href="/cat/english">English</a>
 <a href="/cat/french">French</a>
 <a href="/cat/foreign">Foreign Languages</a>
 <a href="/cat/esl">ESL</a>
 <a href="/cat/literacy">Reading & Writing</a>
 <a href="/cat/computers">Computers</a>
 <a href="/cat/arts">Visual Arts</a>
 <a href="/cat/sports">Sports & Couching</a>
 <a href="/cat/preschool">Pre-school Education</a>
 <a href="/cat/music">Music</a>
 <a href="/cat/disability">Learning Disabilities</a>
 <a href="/cat/social">Social Studies</a>
 <a href="/cat/psychology">Psychology</a>
 <a href="/cat/religion">Religion</a>

                        </li>
                    </ul>
                </li>
                <div class="right_menu">
                    <li> <a href="#region">Brampton</a>

                    </li>
                    <li class="sep"></li>
                    <li> <a href="#signin">Sign in</a>

                    </li>
                    <li> <a href="#signup" class="btn btn-signup">Sign up</a>

                    </li>
                </div>
            </ul>
        </nav>
    </div>
</header>

Компонент CSS

header {
    background: #fefefe;
    padding: 16px 80px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.65);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: block;
}
nav {
    padding: 20px 0;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.06em;
    display: block;
}
nav > ul {
    margin: 18px 0;
    list-style: none;
}
nav > ul > li {
    display: inline-block;
}
nav > ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav > ul > li:hover > ul {
    display: inline;
    background: transparent;
    padding: 0px 80px;
}
nav > ul > li:hover > a.cat {
    background: #F77036;
    border-bottom: 2px solid #DD6430;
    color: #fff;
    border-radius: 3px;
    transition: all 400ms;
}
nav > ul ul > li {
    position: relative;
    list-style: none;
    margin: 16px 4px;
    min-width: 400px;
    display: block;
}
nav > ul ul > li > a {
    color: #313131;
    background: #fff;
    border-bottom: 2px solid transparent;
    padding: 15px 15px;
    text-decoration: none;
    display: inline-block;
}
nav > ul ul > li > a:hover {
    background: #4b545f;
}
nav > ul > li > a, .right_menu > li > a {
    color: #313131;
    background: none;
    border-bottom: 2px solid transparent;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 400ms;
    outline: none;
}
nav > ul > li > a:hover, .right_menu > li > a:hover {
    background: #F77036;
    border-bottom: 2px solid #DD6430;
    color: #fff;
    border-radius: 3px;
    transition: all 400ms;
}
nav > ul > li > a.active, .right_menu > li > a.active {
    color: #fff !important;
    font-weight: 600;
}
nav > ul > li > a.brand {
    background: #CF4920;
    border-bottom: 2px solid #BA411C;
    color: #fff;
    padding: 15px 15px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 400ms;
    outline: none;
    text-align: center;
}
nav > ul > li > a.brand:hover {
    opacity: 0.8;
    transition: all 400ms;
}
nav > ul > li > a.brand > span {
    color: #fff;
    border-left: 1px solid #fff;
    padding: 0 4px;
    font-family:'Permanent Marker', cursive;
    font-weight: normal;
}
/* Navigation Right Menu */
 nav > ul > .right_menu {
    float: right;
}
nav > ul > .right_menu > li {
    list-style: none;
    display: inline-block;
}
nav > ul > .right_menu > li > a.btn-signup {
    background: #A3D29C;
    border-bottom: 2px solid #91BB8B;
    color: #fff;
    border-radius: 3px;
    transition: all 200ms;
}
nav > ul > .right_menu > li > a.btn-signup:hover {
    opacity: 0.8;
    transition: all 200ms;
}
nav > ul > .right_menu > li.sep {
    border-left: 1px solid #ddd;
    width: 1px;
    margin: -12px 2px;
    padding: 16px 0;
}

Вот скрипт JS для скрипта: http://jsfiddle.net/xrjN2/2/ И полный предварительный просмотр: http://jsfiddle.net/xrjN2/2/embedded/result/