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">
    <li>Item</li>
    <li>
        Item 2
        <ul class="sub-menu">
            <li>Subitem</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Item 3</li>
    <li>Item 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">
    <li>Item</li>
    <li>
        Item 2
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
    <ul class="sub-menu">
        <li>Subitem</li>
        <li>Subitem 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.