导航子菜单将 div 向下推（响应式）

Question

我创建了一个带有子菜单下拉菜单的菜单。然而，子菜单在更大的屏幕上工作得很好，可以停留在那里而不是向下推，但为了响应，我想要的是子菜单将 div 向下推。下面的代码如下：

        .navigationMenu {

          clear: both;

          width: 100%;

          margin: 0 auto;

          background-color: #214c21;

        }

        .navigationMenu ul {

          list-style-type: none;

          margin: 0;

          padding: 0;

          position: relative;

          cursor: pointer;

        }

        .navigationMenu ul li {

          display: inline-block;

          position: relative;

          float: left;

          margin-right: 1px;

          cursor: pointer;

        }

        .navigationMenu li a {

          display: block;

          min-width: 140px;

          height: 50px;

          text-align: center;

          line-height: 50px;

          color: #fff;

          background: #214C21;

          text-decoration: none;

        }

        .navigationMenu li:hover a {

          background: #307030;

        }

        .navigationMenu li:hover ul a {

          background: blue;

          color: #FFF;

          height: 40px;

          line-height: 40px;

        }

        .navigationMenu li:hover ul a:hover {

          background: #307030;

          color: #fff;

        }

        .navigationMenu li ul {

          display: none;

          position: absolute;

        }

        .navigationMenu li ul li {

          display: block;

          float: none;

        }

        .navigationMenu li ul li a {

          width: auto;

          min-width: 100px;

          padding: 0 20px;

          border-bottom: 2px solid #CBE1B2;

        }

        .navigationMenu ul li a:hover + .hidden,

        .hidden:hover {

          display: block;

        }

        .show-menu {

          text-decoration: none;

          color: #fff;

          background: #214c21;

          text-align: center;

          padding: 20px 0;

          display: none;

          cursor: pointer;

        }

        .navigationMenu input[type=checkbox] {

          display: none;

          -webkit-appearance: none;

        }

        .navigationMenu input[type=checkbox]:checked ~ #menu {

          display: block;

        }

        .floatClear {

          clear: both;

        }

<div class="navigationMenu">
  <label for="show-menu" class="show-menu">SHOW MENU</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li> <a href="#"> LINK 1 </a> 
    </li>
    <li>	<a href="#"> LINK 2 </a>

      <ul class="hidden">
        <li> <a href="#"> SUB LINK 1 </a> 
        </li>
        <li> <a href="#"> SUB LINK 2 </a> 
        </li>
        <li> <a href="#"> SUB LINK 3 </a> 
        </li>
        <li> <a href="#"> SUB LINK 4 </a> 
        </li>
        <li> <a href="#"> SUB LINK 5 </a> 
        </li>
      </ul>
    </li>
    <li> <a href="#"> LINK 3 </a> 
    </li>
    <li>	<a href="#"> LINK 4 </a>

      <ul class="hidden">
        <li> <a href="#"> SUB LINK 1 </a> 
        </li>
        <li> <a href="#"> SUB LINK 2 </a> 
        </li>
        <li> <a href="#"> SUB LINK 3 </a> 
        </li>
        <li> <a href="#"> SUB LINK 4 </a> 
        </li>
        <li> <a href="#"> SUB LINK 5 </a> 
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="floatClear">
  <p>Lorem ipsum dolor sit amet, vidit adhuc quidam mea eu, his magna sapientem eloquentiam cu.</p>
</div>

反应灵敏

@media only screen and (min-width : 0px) and (max-width : 800px) {
.navigationMenu ul {display: none;}
.navigationMenu li {border-bottom:2px solid #CBE1B2;}
.navigationMenu ul li, li a {width: 100%;}
.show-menu {display:block;}
}

问题是媒体查询的子菜单非常混乱。我想让子菜单留在那里，而不是在更大的屏幕上将段落向下推，而为了响应，我需要子菜单将段落向下推。这里是在此处输入链接描述。有任何想法吗？非常感谢！

Answer 1

您需要absolute在子菜单上使用位置添加以下代码：

.navigationMenu li > ul {position:absolute;width:100%;top:100%;left:0}

检查更新的小提琴

要使工作成为响应式演示，请尝试以下操作：

.navigationMenu li:hover ul a {
    background: blue;
    color: #FFF;
    height: 40px;
    line-height: 40px;
    /*position:Absolute  REMOVE THIS*/
}

在媒体查询上添加子菜单的选择器.navigationMenu li > ul：

@media only screen and (min-width : 0px) and (max-width : 800px) {

    /* MENU */
    .navigationMenu ul,.navigationMenu li > ul {position: static;display: none;}

更新演示