ShellRox ShellRox - 4 months ago 29
HTML Question

CSS: make element overlay every other element

I am making dropdown menu for my main menu, there is username where user clicks and then it shows the content (dropdown menu), This was made by checkbox type input for the button.

Unfortunately, menu doesn't seem to show at all, and disappears at the end of the menu.

Menu:

HTML:

<div class="profilebar">
<div class="dropdown" style="cursor: pointer;">
<input type="checkbox" id="droptoggle" class="toggled">
<label for="droptoggle" class="profilename" style="cursor: pointer;">{{ username }}<span class="caret">&blacktriangledown;</span></label>
<ul class="dropdown-menu" role="menu">
<li class="sub-menu">
<a href="/">Link1</a>
<a href="/">Link2</a>
<a href="/">Link3</a>
<a href-"/">Link4t</a>
</li>
</ul>
</div>
<img class="profilepicture" src="url here"></img>
<p class="balance" style="text-decoration:none">${{ balance }}</p>
</div>
</div>


CSS:

.profilebar {
float: right;
width: 150px;
height: 7%;
margin-top: 0.5%;
margin-right: 1.5%;
min-width: 70px;
}
.profilename {
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 400;
width: 0.5%;
font-size: 11pt;
color: white;
text-decoration: none;
}
.caret {
margin-left: 3.5%;
font-size: 8pt;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 4%;
}
.dropdown-menu {
display: none;
position: absolute;
margin: 2px;
width: 10px;
min-width: 10px;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-menu + a:hover {
background-color: #C90205
}
.toggled {
visibility: hidden;
display: none;
}
.profilepicture {
position: absolute;
margin-left: 1.2%;
border-style: groove;
border-width: 1.5px;
}
.balance {
position: relative;
margin-top: 2.3%;
color: red;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 12pt;
color: #C90205;
margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
display: block;
z-index: 99;
}


Fiddle ( Don't look at image, it is placeholder anyway ).




So what can the problem be? i have tried z-index on positioned elements which didn't seem to work out, how can i make dropdown menu overlay every other element so it can be fully seen?

Answer

The menu has overflow: hidden, so it will hide when going beyond the content, removing the overflow: hidden from the menu class shows the dropdown menu.

Fiddle