MFC中如何做出一个下拉菜单并且做出不同的选项？

Question

我有一个burgermenu问题，其中一个选项需要有一个下拉列表，但内容没有相应的响应。

下拉列表需要推送其他内容，但现在它只是重叠。

我添加了菜单栏/汉堡菜的代码低，希望你能帮助我，谢谢。

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><a href="#">Forside</a></li>
        <div class="dropdown">
          <li><a href="zoneterapi.html">Behandlinger</a></li>
          <div class="dropdown-treatment drophover">
            <li>
              <a href="zoneterapi.html"></a>Zoneterapi</li>
            <li>
              <a href="#"></a>Tankefeltterapi</li>
            <li>
              <a href="#"></a>Babyzoneterapi</li>
          </div>
        </div>
        <div class="dropdown-other">
          <li><a href="#">Priser</a></li>
          <li><a href="#">Om Godfornuft</a></li>
          <li><a href="#">Kontakt</a></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>

MFC中如何做出一个下拉菜单并且做出不同的选项？

burgermenu的下降没有做出相应的反应