[Solved] Dropdown Menu problem

[Marc2412]

Hey there,

My website: here

If you hover over ‘Over ons’ and ‘Downloads’ etc, a dropdown menu with subitems appears but as you can see it’s a bit dodgy, it moves up and down if you then hover over a subitem. I don’t know how to fill this gap between the subitem and the parent.

Help needed :)

Kind Regards,

[Paulie_D]

Can’t see anything obvious…but I can see that a class of selected is being added by JS/JQ.

What’s the styling associated with that?

I also notice that you have transition:all 2s set…that’s probably part of it.

[Marc2412]

Ah thanks, i see, i’ll be working on a fix in a sec :)

[Marc2412]

The transition is not a part of it. I tested it. It’s that the dropdown goes ”up” when you over hover the items.

[Marc2412]

I see that:

border-bottom: 0px solid transparent;

Is the problem.

I removed that but now there is a line UNDER the menu items. But the dropdown is fixed.

[Marc2412]

I fixed it :)

Still need to try and center the dropdown menu.

[Paulie_D]

Centering

This is what you have now

#simplify-main-menu ul ul, .sub-menu, .sub-menu ul ul {
display: none;
float: left;
left: 0;
position: absolute;
border-bottom: 5px solid #000000;
border-top: 5px solid #000000;
border-radius: 5px;
background: #F2F2F2;
background: rgba(242, 242, 242, 0.95);
padding: 5px;
box-shadow: 0px 0px 5px 0px #000000;
z-index: 10000;
}

You’ve told the sub-menu to be at the left side of the parent li (left:0).

If the sub-menu is to be centered under the parent li then we firstly need to push it over 50%…trust me..then pull it back 50% of it’s own width.

We do that with transform:translateX(-50%)

So now

#simplify-main-menu ul ul, .sub-menu, .sub-menu ul ul {
display: none;

float: left; /* this is doing nothing really */

left: 50%; /* new */
transform: translateX(-50%); /* new */

position: absolute;
border-bottom: 5px solid #000000;
border-top: 5px solid #000000;
border-radius: 5px;
background: #F2F2F2;
background: rgba(242, 242, 242, 0.95);
padding: 5px;
box-shadow: 0px 0px 5px 0px #000000;
z-index: 10000;
}

..and they are centered under their respective parent(s) regardless of their own width OR the width of their parent.

[Marc2412]

Thanks Paulie you are my hero :’)

I will try that out asap!

[Marc2412]

Oi tested on smartphone internet and then it’s not centered;p

For the rest works on everything perfectly fine :)

[Author]

Posts