dropdown in burgermenu doesn't respond accordingly - html

Question

I have a problem with the burgermenu one of the options needs to have a dropdown, but the content doesn't respond accordingly.
The dropdown needs to push the other content down, but right now it just overlaps.
I have added the code for the menubar/burgermenu be low
Hope you can help me, thanks.
https://codepen.io/SofieH/pen/ZvveNK
header {
background: #e7e7e8;
color: #EBEBD3;
padding: 0.5em 0;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: right;
font-size: 1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
top: 100%;
background: #464655;
clip-path: circle(0px at top left);
transition: clip-path ease-in-out 700ms;
/* display: none; */
}
.site-nav--open {
clip-path: circle(250% at top left);
/* display: block; */
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #EBEBD3;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #E4B363;
color: #464655;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255, 255, 255, .4);
}
.menu-toggle {
position: absolute;
padding: 15px;
float: left;
top: 5px;
cursor: pointer;
}
.menu-toggle:hover {
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #636363;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-treatment {
display: none;
background-color: #464655;
position: absolute;
z-index: 1;
/*min-width: 160px;*/
height: 400px;
}
.dropdown-treatment a {
padding: 2em 4em 2em 1.5em;
}
.dropdown:hover .dropdown-treatment {
display: block;
margin-left: 100px;
}
nav ul div div:hover .dropdown-other {
margin-top: 300px;
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
clip-path: initial;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 3em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
}
<header>
<div class="container">
<!--<h1 class="logo"><span>Logo</span></h1>-->
<h1 class="logo">Godfornuft</h1>
<nav class="site-nav">
<ul>
<li>Forside</li>
<div class="dropdown">
<li>Behandlinger</li>
<div class="dropdown-treatment drophover">
<li>
Zoneterapi</li>
<li>
Tankefeltterapi</li>
<li>
Babyzoneterapi</li>
</div>
</div>
<div class="dropdown-other">
<li>Priser</li>
<li>Om Godfornuft</li>
<li>Kontakt</li>
</div>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<div class="col XS-12 logotop">
<img src="http://via.placeholder.com/200x30" alt="">
</div>
</header>

Answer 1

Try removing the position absolute from .dropdown-treatment.
Please try to add only li tag as the direct child of ul
Read more about positioning here
A sample
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
});
body {
margin:0;
padding: 0;
width: 100%;
}
header {
background: #e7e7e8;
color: #EBEBD3;
padding: 0.5em 0;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo {
float: right;
font-size: 1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.logo span {
font-weight: 400;
}
.site-nav {
position: absolute;
top: 100%;
background: #464655;
clip-path: circle(0px at top left);
transition: clip-path ease-in-out 700ms;
/* display: none; */
}
.site-nav--open {
clip-path: circle(250% at top left);
/* display: block; */
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #EBEBD3;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #E4B363;
color: #464655;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle {
position: absolute;
padding: 15px;
float: left;
top: 5px;
cursor: pointer;
}
.menu-toggle:hover {
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #636363;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-treatment {
display: none;
background-color: #464655;
/*background-color: #E4B363;*/
/*position: absolute;
z-index: -20;*/
/*min-width: 160px;*/
/* height: 400px;*/
}
.dropdown-treatment a {
// padding: 2em 4em 2em 1.5em;
}
.dropdown:hover .dropdown-treatment {
display: block;
margin-left: 100px;
}
nav ul div div:hover .dropdown-other {
margin-top: 300px;
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
clip-path: initial;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 3em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Godfornuft.dk</title>
<link rel="stylesheet" href="css/skeleton_mobile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/costume.css">
<!--https://codepen.io/anon/pen/YYxEej?editors=1010-->
</head>
<body>
<header class="">
<div class="container">
<!--<h1 class="logo"><span>Logo</span></h1>-->
<h1 class="logo">Godfornuft</h1>
<nav class="site-nav">
<ul>
<li>Forside</li>
<li class="dropdown">Behandlinger
<ul class="dropdown-treatment drophover">
<li>Zoneterapi</li>
<li>Tankefeltterapi</li>
<li>Babyzoneterapi</li>
</ul>
</li>
<li>Priser</li>
<li>Om Godfornuft</li>
<li>Kontakt</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<div class="col XS-12 logotop">
<img src="http://via.placeholder.com/200x30" alt="">
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src="js/navbar.js"></script>
</body>
</html>