Child element hiding sibling - html

Question

I would like to see my menu links.
I have implemented a CSS dropdown menu using the checkbox hack.
I have attached an icon to the bottom of the menu. When triggered, the menu drags the icon down along with it.
However, the icon's "margin" (according to dev tools) covers the entire width of the menu, such that the only way to display the links in the menu is to make the menu drop down significantly lower, changing:
#navbar-checkbox:checked + .menu ul {
max-height: 50px; ==============> 75px
z-index: 3;
}
I have tried just about everything I can think of: from z-index, to all kinds of positions, to transparent to opacity etc.
I simply want to display the links.
body {
background-color: purple;
}
.menu {
padding: 15px 15px 0px 15px;
background: transparent;
min-height: 2.75em;
line-height: 0em;
border-bottom: 1px solid white;
position: relative;
}
.logo {
color: white;
transition: 0.4s ease-in-out;
}
#logo {
background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: 80%;
display: block;
margin-top: 35px;
margin-bottom: -10px;
height: 50px;
width: 50px;
transition: 0.4s ease-in-out;
z-index: 2;
}
.logo:hover {
color: mediumturquoise;
transition: 0.4s ease;
}
.menu .logo div {
position: absolute;
width: 200px;
margin-top: -20px;
}
.logo p {
margin-left: 15px;
margin-top: 35px;
font-size: 20px;
font-weight: 800;
font-family: 'Coustard', serif;
}
.menu ul {
font-family: 'Open Sans', sans-serif;
color: white;
transition: max-height 0.4s linear 0;
margin: 0;
padding: 0;
text-align: right;
}
.menu a {
text-decoration: none;
color: white;
transition: 0.4s ease-in-out;
}
.menu a:hover {
color: black;
transition: 0.4s ease-in-out;
}
.menu li {
display: inline-block;
padding: .45em 1.1em;
}
#media(max-width:321px){
#logo {
margin-left: 5%;
}
}
#media (min-width: 0px) {
.menu ul {
max-height: 0;
overflow: hidden;
}
.menu li {
visibility: visible;
display: inline-block;
padding: 4em 0 0.5em;
border: none;
margin-right: 4px;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 50px;
z-index: 3;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: white;
}
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.6666666666666667em;
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
top: 0.37777777777777777em;
}
.navbar-handle:after {
top: 0.8888888888888888em;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: absolute;
font-size: 1.2em;
top: 1.3em;
color: white;
right: 25px;
z-index: 10;
}
.navbar-checkbox {
display: none;
}
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<a class="logo" href="http://myapp.com">
<div class="logo">
<p>myapp.com</p>
</div>
</a>
<ul>
<li>how it works
</li>
<li>about us
</li>
<li>contact
</li>
</ul>
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
</nav>

Answer 1

Inorder to see the links visible just try to adjust the padding of .menu li padding: 4em 0 0.6em; to padding: 2em 0 0.6em;

Answer 2

here are corrections:
put these before
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>
these style must be added and edited
#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}
My advice:
#navbar-checkbox:checked + .menu ul {
display: block;
}
#navbar-checkbox + .menu ul {
display: none;
}
Do not use height as parameter.