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

概述我创建了一个带有子菜单下拉菜单的菜单.然而,子菜单在更大的屏幕上工作得非常好,因为停留在那里而不是向下推,但是响应是我想要的是子菜单推动div.以下代码： .navigationMenu { clear: both; width: 100%; margin: 0 auto; background-color: 我创建了一个带有子菜单下拉菜单的菜单.然而,子菜单在更大的屏幕上工作得非常好,因为停留在那里而不是向下推,但是响应是我想要的是子菜单推动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 >  <label for="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 >        <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 >        <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 >  <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

总结

以上是内存溢出为你收集整理的html – 导航子菜单按下下面的div(响应)全部内容，希望文章能够帮你解决html – 导航子菜单按下下面的div(响应)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。