html – 导航子菜单按下下面的div(响应)

我创建了一个带有子菜单下拉菜单的菜单.然而,子菜单在更大的屏幕上工作得非常好,因为停留在那里而不是向下推,但是响应是我想要的是子菜单推动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.任何想法?非常感谢!

你需要在子菜单上使用绝对位置添加这行代码:

.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

相关文章
相关标签/搜索