CODEWITHSUNDEEP
htmlcss
Linesofcode
Linesofcode

Reputation: 5923

Dropdown menu is shown beneath other links

I'm having some troubles with a theme that I bought. Whenever hovering a <a href> that is above another <a href>, the dropdown-menu is shown beneath and should be shown above everything.

My first focus / attempt was to change the index, in this case increase the z-index of the <div class="dropdown-menu"> to a number higher than the <a href> but that didn't work.

So, this is my HTML structure:

<li class="top_level dropdown">
    <a href="#">Category B</a>
    <div class="dropdown-menu megamenu column1" style="">
        <div class="dropdown-inner">
            <ul class="list-unstyled childs_1">
                <li>
                    <a href="#">Category B - A</a>
                </li>
                <li>
                    <a href="#">Category B - B</a>
                </li>
                <li>
                    <a href="#">Category B - C</a>
                </li>
            </ul>
        </div>
    </div>
</li>

And the following image illustrates the problem in the JSFiddle:

enter image description here

Upvotes: 1

Views: 161

Answers (1)

ezakto
ezakto

Reputation: 3194

The CSS is kind of a mess, but I found the problem! You're setting z-index:20 to the main menu li elements. As they all have the same z-index, the ones that appear later in the markup are the ones that get on top when overlapping. If your menu was in one row, you wouldn't notice it. The z-index of their children is not relevant in this context, only the parent. Just remove it:

z-index fun

Upvotes: 2

Related Questions