可折叠菜单的所有下拉菜单都已展开

Question

我正在为一个项目创建一个网站而且我不允许使用框架（所以没有引导程序），我现在遇到折叠时导航栏的问题（屏幕宽度）在800px以下）扩展了所有个别链接，而不是单独的类别。

我已将此网站上传至 here

The Html nav bar

<nav role="navigation" id="cssmenu">
<ul>
    <li class="active"><a href="index.html">Home</a></li>

    <li class="has-sub"><a href="pages/courses.html">Courses</a>
        <ul>
            <li><a href="pages/courses/media.html">Digital Media</a></li>
            <li><a href="pages/courses/webdev.html">Web Development</a></li>
            <li><a href="pages/courses/journalism.html">Journalism</a></li>
            <li class="last"><a href="pages/courses/infocomms.html">Information & Communications</a></li>
        </ul>
    </li>

    <li class="has-sub"><a href="pages/facilities.html">Facilities</a>
        <ul>
            <li><a href="pages/facilities/society.html">Societies</a></li>
            <li><a href="pages/facilities/jobs.html">Jobs and Placements</a></li>
            <li class="last"><a href="pages/facilities/library.html">Library</a></li>
        </ul>
    </li>

    <li class="has-sub"><a href="pages/manchester.html">Manchester & Student Life</a>
        <ul>
            <li><a href="pages/manchester/travel.html">Travel</a></li>
            <li><a href="pages/manchester/attractions.html">Attractions</a></li>
            <li class="last"><a href="pages/manchester/night.html">Nightlife</a></li>
        </ul>
    </li>

    <li class="has-sub"><a href="pages/help.html">Student Help</a>
        <ul>
            <li><a href="pages/help/finance.html">Finance</a></li>
            <li><a href="pages/help/union.html">Student Union</a></li>
            <li class="last"><a href="pages/help/assist.html">Assistance</a></li>
        </ul>
    </li>

    <li class="last"><a href="pages/contact.html">Contact</a></li>

    </ul>
</nav>

Jquery脚本

( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');

// Create responsive trigger
menuList.prepend('<li id="responsive-tab"><a href="#">Digi-Co</a></li>');

// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
    listItems.slideToggle('fast');
    listItems.addClass('collapsed');
});
});
} )( jQuery );

也可以找到CSS here

任何帮助都将受到赞赏，我确定它只是一个简单的覆盖语法，但我不能确定，无论是否是它或是否是脚本问题。

谢谢。