导航子菜单将div向下推(自适应) [英] Navigation submenu push a div below down (Responsive)
问题描述
我创建了一个带有子菜单下拉菜单的菜单.但是，子菜单在较大的屏幕上可以很好地工作，可以呆在那里并且不向下推，但为了响应，我想让子菜单向下推div.下面的代码:
I have created a menu with a submenu dropdown. However, the submenu works very well on a bigger screen for staying there and not pushing down but for responsive is I want is submenu pushing the div down. The following code below:
.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;}
}
问题在于媒体查询子菜单非常混乱.我想使子菜单停留在该位置，而不是在较大的屏幕上下推该段落，而为了做出响应，我需要该子菜单来将该段落下推.在此处在此处输入链接描述.有任何想法吗?非常感谢！
The problem is the submenu on media query are very messy. I would like to make submenu stay there and not pushing the paragraph down on the bigger screen whereas for responsive, i need the submenu to push the paragraph down. HERE IS enter link description here. Any ideas? Many thanks!
推荐答案
您需要在子菜单上使用 absolute 位置添加以下代码行:
You need to use absolute position on the submenu add this line of code:
.navigationMenu li > ul {position:absolute;width:100%;top:100%;left:0}
Check the Updated Fiddle
要使您的响应式演示工作，请尝试以下操作:
To make work your responsive demo, try this:
.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;}
这篇关于导航子菜单将div向下推(自适应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
