The responsive menu pushes the fixed bar down when it's displayed - html

Question

I have a responsive menu error that displays on mobile when it pushes the footer bar at the bottom of the page every time it appears and the sub-menu is opened.
You can see it working live on your phone at www.nhadatsonnghia.com nha dat go vap .
So how to fix this display error of responsive menu with css. Any suggestions are appreciated!
Thanks so much!
Here is my code :
#import url(http://fonts.googleapis.com/css?family=Arial:400,700);
#cssmenu,#cssmenu > ul,#cssmenu > ul > li,#cssmenu > ul > li a,#cssmenu #menu-button
{
display: block;
-moz-box-sizing: border-box;
list-style: none;
padding: 0;
}
#cssmenu:after,#cssmenu > ul:after
{
content:' .' ;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
#cssmenu #menu-button { display:none; }
#cssmenu
{
position: relative;
text-align: center;
z-index: 15;
float: right;
}
#cssmenu > ul > li
{
position: relative;
vertical-align: middle;
display: inline-block;
padding: 0;margin: 0;
}
#cssmenu.align-center > ul
{
font-size:0;
text-align:center;
}
#cssmenu.align-center > ul > li
{
display:inline-block;
float:none;
}
#cssmenu.align-center ul ul
{
text-align:left;
}
#cssmenu.align-right > ul > li
{
float:right;
}
#cssmenu > ul > li > a
{
color: black;
font-size: 16px;
display: inline-block;
text-decoration: none;
letter-spacing: 1px;
margin: 10px 0 0 0;
padding: 0 12px;
font-family: Open Sans,Helvetica,Arial,sans-serif;
font-weight: 500;
line-height: 40px;
}
#cssmenu > ul > li:hover > a
{
color:#ffffff;
background: #ffbd2f;
border:1px;
border-radius:5px;
}
#cssmenu > ul > li.has-sub > a { padding-right:10px; }
#cssmenu > ul > li.has-sub > a:after
{
position:absolute;
top:0;
right:0;
width:0;
height:2px;
display:block;
background:#dddddd;
content:' ' ;
}
#cssmenu > ul > li.has-sub > a:before
{
position:absolute;
top:0; right:0;
display:block;
width:2px; height:0;
background:#dddddd;
content:' ' ;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before { top:23px; height:0; }
#cssmenu ul ul { position:absolute; left:-9999px; z-index:9999; }
#cssmenu.align-right ul ul { text-align:right; }
#cssmenu ul ul li
{
height:0;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;
position: relative;
list-style: none;
}
#cssmenu ul ul ul li {
height:0;
-webkit-transition:all .25s ease;
-moz-transition:all .25s ease;
-ms-transition:all .25s ease;
-o-transition:all .25s ease;
transition:all .25s ease;
}
#cssmenu li:hover > ul { left:auto; }
#cssmenu.align-right li:hover > ul { left:auto; right:0; }
#cssmenu li:hover > ul > li { height:35px; }
#cssmenu ul ul ul { margin-left:100%; top:0; }
#cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; }
#cssmenu ul ul li a
{
border-bottom:1px solid rgba(150,150,150,0.15);
padding:15px;
width:250px;
font-size:13px;
text-decoration:none;
color:#dddddd;
font-weight:400;
background:#333333;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom:0; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover { color:#ffffff; }
#cssmenu ul ul li.has-sub > a:after
{
position:absolute;
top:16px; right:11px;
width:8px; height:2px;
display:block; background:#dddddd;
content:' ' ;
}
#cssmenu.align-right ul ul li.has-sub > a:after { right:auto; left:11px; }
#cssmenu ul ul li.has-sub > a:before
{
position:absolute;
top:13px; right:14px;
display:block;
width:2px; height:8px;
background:#dddddd; content:' ' ;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before { right:auto; left:14px; }
#cssmenu ul ul > li.has-sub:hover > a:before { top:17px; height:0; }
#media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {
#menu-desktop
{
float:left;
background: #ffbd2f;
padding: 0 5px;
display: block;
}
#cssmenu { width:100%; }
#cssmenu ul { width:100%; display:none; }
#cssmenu.align-center > ul { text-align:left; }
#cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); }
#cssmenu ul ul li,#cssmenu li:hover > ul > li { height:auto; }
#cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; }
#cssmenu > ul > li { float:none; }
#cssmenu ul ul li a { padding-left:25px; }
#cssmenu ul ul ul li a { padding-left:35px; }
#cssmenu ul ul li a { color:#dddddd; background:none; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color:#ffffff; }
#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul
{
position:relative;
left:0;
width:100%;
margin:0;
text-align:left;
}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before { display:none; }
#cssmenu #menu-button
{
display:block;
padding:32px;
color:#dddddd;
cursor:pointer;
font-size:12px;
text-transform:uppercase;
font-weight:700;
}
#cssmenu #menu-button:after
{
position:absolute;
top:26px; right:13px;
display:block;
height:5px; width:40px;
border-top:5px solid #ffffff;
border-bottom:5px solid #ffffff;
content:' ' ; }
#cssmenu #menu-button:before
{
position:absolute;
top:16px; right:13px;
display:block;
height:5px; width:40px;
background:#ffffff;
content:' ' ; }
#cssmenu #menu-button.menu-opened:after
{
top:23px;
border:0;
height:10px; width:40px;
background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before
{
top:23px;
background:#ffffff;
width:40px;
height:10px;
-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);
}
#cssmenu .submenu-button
{
position:absolute;
z-index:99;
right:0;
top:0;
display:block;
border-left:1px solid rgba(120,120,120,0.2);
height:46px; width:46px;
cursor:pointer; }
#cssmenu .submenu-button.submenu-opened { background:#262626; }
#cssmenu ul ul .submenu-button { height:34px; width:34px; }
#cssmenu .submenu-button:after
{
position:absolute;
top:22px; right:19px;
width:8px; height:2px;
display:block;
background:#dddddd;
content:' ' ;
}
#cssmenu ul ul .submenu-button:after { top:15px; right:13px; }
#cssmenu .submenu-button.submenu-opened:after { background:#ffffff; }
#cssmenu .submenu-button:before
{
position:absolute;
top:19px; right:22px;
display:block;
width:2px; height:8px;
background:#dddddd;
content:' ' ;
}
#cssmenu ul ul .submenu-button:before { top:12px; right:16px; }
#cssmenu .submenu-button.submenu-opened:before { display:none; }
}
<div id="menu-desktop">
<div id="cssmenu">
<div id="menu-button" class="menu-opened"></div>
<ul class="open" style="display: block;">
<li>Nhà Đất Sơn Nghĩa</li>
<li class="active has-sub">
<span class="submenu-button submenu-opened"></span>
Nhà Đất Gò Vấp
<ul class="open" style="display: block;">
<li>Bán Nhà Gò Vấp mặt phố, mặt tiền</li>
<li>Nhà Gò Vấp giá dưới 1 tỷ</li>
<li>Nhà Gò Vấp giá 1 đến 2 tỷ</li>
<li>Nhà Gò Vấp giá 2 đến 3 tỷ</li>
<li>Nhà Gò Vấp giá 3 đến 4 tỷ</li>
<li class="active has-sub">
<span class="submenu-button submenu-opened"></span>
Nhà Đất Gò Vấp bán theo phường
<ul class="open" style="display: block;">
<li>Phường 8</li>
<li>Phường 9</li>
<li>Phường 13</li>
<li>Phường 16</li>
<li>Phường 17</li>
</ul>
</li>
</ul>
</li>
<li>Nhà Đất Quận 12</li>
</ul>
</div></div>

Answer 1

Suggesting you to use Absolute position for the sub menu so it can overlap the footer instead of pushing it when expanded.
Hope it helps.
Fixed Version:
#import url(http://fonts.googleapis.com/css?family=Arial:400,700);
#cssmenu,#cssmenu > ul,#cssmenu > ul > li,#cssmenu > ul > li a,#cssmenu #menu-button
{
display: block;
-moz-box-sizing: border-box;
list-style: none;
padding: 0;
}
#cssmenu:after,#cssmenu > ul:after
{
content:' .' ;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
#cssmenu #menu-button { display:none; }
#cssmenu
{
position: relative;
text-align: center;
z-index: 15;
float: right;
}
#cssmenu > ul > li
{
position: relative;
vertical-align: middle;
display: inline-block;
padding: 0;margin: 0;
}
#cssmenu.align-center > ul
{
font-size:0;
text-align:center;
}
#cssmenu.align-center > ul > li
{
display:inline-block;
float:none;
}
#cssmenu.align-center ul ul
{
text-align:left;
}
#cssmenu.align-right > ul > li
{
float:right;
}
#cssmenu > ul > li > a
{
color: black;
font-size: 16px;
display: inline-block;
text-decoration: none;
letter-spacing: 1px;
margin: 10px 0 0 0;
padding: 0 12px;
font-family: Open Sans,Helvetica,Arial,sans-serif;
font-weight: 500;
line-height: 40px;
}
#cssmenu > ul > li:hover > a
{
color:#ffffff;
background: #ffbd2f;
border:1px;
border-radius:5px;
}
#cssmenu > ul > li.has-sub > a { padding-right:10px; }
#cssmenu > ul > li.has-sub > a:after
{
position:absolute;
top:0;
right:0;
width:0;
height:2px;
display:block;
background:#dddddd;
content:' ' ;
}
#cssmenu > ul > li.has-sub > a:before
{
position:absolute;
top:0; right:0;
display:block;
width:2px; height:0;
background:#dddddd;
content:' ' ;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before { top:23px; height:0; }
#cssmenu ul ul { position:absolute; left:-9999px; z-index:9999; }
#cssmenu.align-right ul ul { text-align:right; }
#cssmenu ul ul li
{
height:0;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;
position: relative;
list-style: none;
}
#cssmenu ul ul ul li {
height:0;
-webkit-transition:all .25s ease;
-moz-transition:all .25s ease;
-ms-transition:all .25s ease;
-o-transition:all .25s ease;
transition:all .25s ease;
}
#cssmenu li:hover > ul { left:auto; height: auto; }
#cssmenu.align-right li:hover > ul { left:auto; right:0; }
#cssmenu li:hover > ul > li { height:35px; }
#cssmenu ul ul ul { margin-left:100%; top:0; }
#cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; }
#cssmenu ul ul li a
{
border-bottom:1px solid rgba(150,150,150,0.15);
padding:15px;
width:250px;
font-size:13px;
text-decoration:none;
color:#dddddd;
font-weight:400;
background:#333333;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom:0; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover { color:#ffffff; }
#cssmenu ul ul li.has-sub > a:after
{
position:absolute;
top:16px; right:11px;
width:8px; height:2px;
display:block; background:#dddddd;
content:' ' ;
}
#cssmenu.align-right ul ul li.has-sub > a:after { right:auto; left:11px; }
#cssmenu ul ul li.has-sub > a:before
{
position:absolute;
top:13px; right:14px;
display:block;
width:2px; height:8px;
background:#dddddd; content:' ' ;
-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before { right:auto; left:14px; }
#cssmenu ul ul > li.has-sub:hover > a:before { top:17px; height:0; }
#media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {
#menu-desktop
{
float:left;
background: #ffbd2f;
padding: 0 5px;
display: block;
}
#cssmenu { width:100%; }
#cssmenu ul { width:100%; display:none; }
#cssmenu.align-center > ul { text-align:left; }
#cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); }
#cssmenu ul ul li,#cssmenu li:hover > ul > li { height:auto; }
#cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; }
#cssmenu > ul > li { float:none; }
#cssmenu ul ul li a { padding-left:25px; }
#cssmenu ul ul ul li a { padding-left:35px; }
#cssmenu ul ul li a { color:#dddddd; background:none; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color:#ffffff; }
#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul
{
position:relative;
left:0;
width:100%;
margin:0;
text-align:left;
box-sizing: border-box;
}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before { display:none; }
#cssmenu #menu-button
{
display:block;
padding:32px;
color:#dddddd;
cursor:pointer;
font-size:12px;
text-transform:uppercase;
font-weight:700;
}
#cssmenu #menu-button:after
{
position:absolute;
top:26px; right:13px;
display:block;
height:5px; width:40px;
border-top:5px solid #ffffff;
border-bottom:5px solid #ffffff;
content:' ' ; }
#cssmenu #menu-button:before
{
position:absolute;
top:16px; right:13px;
display:block;
height:5px; width:40px;
background:#ffffff;
content:' ' ; }
#cssmenu #menu-button.menu-opened:after
{
top:23px;
border:0;
height:10px; width:40px;
background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before
{
top:23px;
background:#ffffff;
width:40px;
height:10px;
-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);
}
#cssmenu .submenu-button
{
position:absolute;
z-index:99;
right:0;
top:0;
display:block;
border-left:1px solid rgba(120,120,120,0.2);
height:46px; width:46px;
cursor:pointer; }
#cssmenu .submenu-button.submenu-opened { background:#262626; }
#cssmenu ul ul .submenu-button { height:34px; width:34px; }
#cssmenu .submenu-button:after
{
position:absolute;
top:22px; right:19px;
width:8px; height:2px;
display:block;
background:#dddddd;
content:' ' ;
}
#cssmenu ul ul .submenu-button:after { top:15px; right:13px; }
#cssmenu .submenu-button.submenu-opened:after { background:#ffffff; }
#cssmenu .submenu-button:before
{
position:absolute;
top:19px; right:22px;
display:block;
width:2px; height:8px;
background:#dddddd;
content:' ' ;
}
#cssmenu ul ul .submenu-button:before { top:12px; right:16px; }
#cssmenu .submenu-button.submenu-opened:before { display:none; }
}
.absolute-sub {
height: 0;
position: absolute !important;
background-color: #ffbd2f;
overflow: hidden;
top: 46px;
}
<head>
<link rel="stylesheet" href="style.css">
</head>
<div id="menu-desktop">
<div id="cssmenu">
<div id="menu-button" class="menu-opened"></div>
<ul class="open" style="display: block;">
<li>Nhà Đất Sơn Nghĩa</li>
<li class="active has-sub">
<span class="submenu-button submenu-opened"></span>
Nhà Đất Gò Vấp
<ul class="open" style="display: block;">
<li>Bán Nhà Gò Vấp mặt phố, mặt tiền</li>
<li>Nhà Gò Vấp giá dưới 1 tỷ</li>
<li>Nhà Gò Vấp giá 1 đến 2 tỷ</li>
<li>Nhà Gò Vấp giá 2 đến 3 tỷ</li>
<li>Nhà Gò Vấp giá 3 đến 4 tỷ</li>
<li class="active has-sub">
<span class="submenu-button submenu-opened"></span>
Nhà Đất Gò Vấp bán theo phường
<ul class="open absolute-sub" style="display: block;">
<li>Phường 8</li>
<li>Phường 9</li>
<li>Phường 13</li>
<li>Phường 16</li>
<li>Phường 17</li>
</ul>
</li>
</ul>
</li>
<li>Nhà Đất Quận 12</li>
</ul>
</div></div>