Anthosiast Anthosiast - 2 months ago 13
CSS Question

Navigation submenu push a div below down (Responsive)

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>





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 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!

Answer

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*/
}

Add the selector for the submenu on the media query .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

Comments