I created a menu with a drop-down submenu. However, the submenu works very well on the big screen to stay there rather than push down, but for the response I want the submenu to push the div down. The following code is 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>
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;}
}
The problem is that the submenu in the media query is very dirty. I would like the submenu to remain there, and not press the paragraph on the big screen, while for the response I need the submenu to push the paragraph. HERE enter the link here . Any ideas? Many thanks!
source
share