导航子菜单按下下方的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>

RESPONSIVE

@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;}
}

问题是媒体查询的子菜单非常混乱。我想让子菜单停留在那里而不是在较大的屏幕上按下段落，而为了响应，我需要子菜单来推动段落。这里是enter link description here。有任何想法吗？非常感谢！

Answer 1

将此position: absolute添加到.navigationMenu li ul

d EMO

.navigationMenu li ul {
   display: none;
   position: absolute;/*add this*/
}

更新以使其具有响应性，将其添加到media query

.navigationMenu li ul {display: none; position: absolute}
.navigationMenu li ul li {display: block;float: none; z-index: 333}
@media (max-width: 600px) {
  .navigationMenu ul li {
    display: block;
    clear: both;
    width: 100%;
    }
}

DEMO

Answer 2

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

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

<强> Check the Updated Fiddle

要使您的响应式演示工作，请尝试以下方法：

.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;}

Updated Demo