html - burgermenu 中的下拉菜单没有相应的响应

Question

我对 burgermenu 有疑问，其中一个选项需要有一个下拉菜单，但内容没有相应的响应。

下拉菜单需要将其他内容向下推，但现在它只是重叠。

我添加了菜单栏/burgermenu 的代码 be low希望你能帮助我，谢谢。

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><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>

Answer 1

尝试从 .dropdown-treatment 中删除 position absolute。

请尝试只添加 li 标签作为 ul 的直接子标签

阅读更多关于定位的信息 here

一个例子

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