- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
TBH, I’m not sure but I noted this:
.l-inline>li {
float: left;
}
Classes cannot start with numbers…
BTW, “SCHEDULE” is spelled incorrectly. :)
I’m pretty sure it’s related to the Slider…probably something in the JS which is affecting the absolute positioning / stacking.
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.
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
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
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!