[Solved] Absolute submenu not showing properly

[robturlinckx]

I’m just setting up a simple dropdown submenu with positions absolute/relative to parent, but the submenu is not showing correctly.

It’s so an easy markup normally, but I don’t see what goes wrong here.

http://esports.robturlinckx.mixture.io/

[Paulie_D]

TBH, I’m not sure but I noted this:

.l-inline>li {
float: left;
}

Classes cannot start with numbers…

BTW, “SCHEDULE” is spelled incorrectly. :)

[Paulie_D]

I’m pretty sure it’s related to the Slider…probably something in the JS which is affecting the absolute positioning / stacking.

[robturlinckx]

Thanks for the reply Paulie.

In fact it’s not a number, it’s de letter ‘l’ which indicates its a layout-style (SMACSS principle).

Corrected Schedule. Thanks for mentioning.

[robturlinckx]

It’s not the slider. This module is pure html/css markup. Their is no js yet. Eliminating all the elements form the page still give the weird positioning

[Paulie_D]

In fact it’s not a number, it’s de letter ‘l’ which indicates its a layout-style (SMACSS principle).

Hmmm…it’s being rendered as a “1” for me but OK.

OK…cracked it…I think.

From

header[role=banner] {
overflow: hidden; <== remove this
}

From

.menubar {
overflow: hidden; <== remove this
border-bottom: 3px solid #22cbe8;
list-style: none;
}

With this

.menu {
position: absolute;
z-index: 999;
top: 0; <== change this to 100%;
left: 0;
background: #fff;
list-style: none;
height: 300px;
min-width: 12.5em;
padding: 10px 0;
}

I would mention that the submenu is not hidden by default but I assume that is deliberate.

Something odd is going on with the border bottom on the .menubar but that’s probably minor

[robturlinckx]

Thanks Paulie,

I just found it as well. It was indeed the overflow you mentioned. Thanks for looking at this. I will fix the issue with the border-bottom as well. Should be minor indeed.

Thanks for the support!

[Author]

Posts