Sub navigation disappears when I click on it in responsive view

Question

I've created a sub navigation and when I click on it (using my jquery code), it scrolls down and i can hover over the links but they dont appear at all.

I tried looking into what could be causing the problem such as the color or background but I can't find out where i went wrong. I was messing around with the visibility and display of the element but I don't think theres a problem there, although I'm unsure.

To isolate where the problem of the code may lie, here is the sub navigation code:

ul {
    padding: 0;
    position: absolute;
    top: 33px; right: 16px;
    width: 150px;
    display: none;
    opacity: 0;
    visibility: hidden;

    @include transition('all .2s ease-in-out');

    li {
        display: block;
        width: 100%;

        a {
            width: 100%;
            display: block;
            background: lighten(#27344C, 10);
            color: #FFF;
            padding: 0;
            padding-right: 14px;

            @include transition('all .2s ease-in-out');
        }
    }
    li:hover {
        a { background: lighten(#27344C, 5); }
    }
}

I think the problem may actually be the javascript on this line when i edit the css styles:

$('#profileToggle').on('click', function() {
        $('#profileList').slideToggle().css({'visibility': 'visible', 'display': 'block'});
        $(this).addClass('active');
    });

Here is the JSFiddle: http://jsfiddle.net/8xat4v97/1/ (starts line 112 of the scss code)

Answer 1

As with what @BillyNate had said,

the opacity is set to 0 for some reason in my sub navigations.

Removing this line fixed the issue! Thanks :)