0

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.

0

As I said, I've been missing a stupid detail in my CSS, there was a fixed height for all the li. Problem solved by removing it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.