Always show wordpress submenu on responsive header menu

I'm trying to edit my CSS to always show all the li tags inside my header menu, also with ul.sub-menu li; I just want to show all the items from the menu, but I'm working on it for hours and I've still haven't found any solution.

This is my menu's structure:

ul class="menu"
    liItem/li
    li
        Item 2
        ul class="sub-menu"
            liSubitem/li
            liSubitem 2/li
        /ul
    /li
    liItem 3/li
    liItem 4/li
/ul

This is what I've tried so far:

ul.menu li ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    top: 100% !important;
    position:relative;
}

But all the hidden li are showing at the bottom of the menu, instead after their parent ones, and this is what i get ( code structure is the same, but this is a representation of "how it shows"):

ul class="menu"
    liItem/li
    li
        Item 2
    /li
    liItem 3/li
    liItem 4/li
    ul class="sub-menu"
        liSubitem/li
        liSubitem 2/li
    /ul
/ul

Can someone help me? Maybe I'm missing something really simple, but I've not found the solution yet.

Thanks in advice.