响应式菜单在显示时将固定条向下推

Question

我有一个响应菜单错误，每次移动并打开子菜单时，它都会在页面底部按下页脚栏时在移动设备上显示。

您可以在www.nhadatsonnghia.com上查看它在手机上的实时运行情况。

因此，如何使用CSS修复此响应菜单的显示错误。任何建议表示赞赏！

非常感谢！

这是我的代码：

@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><a href="#">Nhà Đất Sơn Nghĩa</a></li>
	<li class="active has-sub">
	<span class="submenu-button submenu-opened"></span>
	<a href="#">Nhà Đất Gò Vấp</a>
		<ul class="open" style="display: block;">
			<li><a href="#">Bán Nhà Gò Vấp mặt phố, mặt tiền</a></li>
			<li><a href="#">Nhà Gò Vấp giá dưới 1 tỷ</a></li>
			<li><a href="#">Nhà Gò Vấp giá 1 đến 2 tỷ</a></li>
			<li><a href="#">Nhà Gò Vấp giá 2 đến 3 tỷ</a></li>
			<li><a href="#">Nhà Gò Vấp giá 3 đến 4 tỷ</a></li>
			<li class="active has-sub">
			<span class="submenu-button submenu-opened"></span>
			<a href="#">Nhà Đất Gò Vấp bán theo phường</a>
				<ul class="open" style="display: block;">
					<li><a href="#">Phường 8</a></li>
					<li><a href="#">Phường 9</a></li>
					<li><a href="#">Phường 13</a></li>
					<li><a href="#">Phường 16</a></li>
					<li><a href="#">Phường 17</a></li>
				</ul>
			</li>
		</ul>
	</li>
<li><a href="#">Nhà Đất Quận 12</a></li>
</ul>
</div></div>

Answer 1

建议您在子菜单中使用“绝对位置”，以便它可以与页脚重叠而不是在展开时按页脚。

希望有帮助。

固定版本：

@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><a href="#">Nhà Đất Sơn Nghĩa</a></li>
		<li class="active has-sub">
		<span class="submenu-button submenu-opened"></span>
		<a href="#">Nhà Đất Gò Vấp</a>
			<ul class="open" style="display: block;">
				<li><a href="#">Bán Nhà Gò Vấp mặt phố, mặt tiền</a></li>
				<li><a href="#">Nhà Gò Vấp giá dưới 1 tỷ</a></li>
				<li><a href="#">Nhà Gò Vấp giá 1 đến 2 tỷ</a></li>
				<li><a href="#">Nhà Gò Vấp giá 2 đến 3 tỷ</a></li>
				<li><a href="#">Nhà Gò Vấp giá 3 đến 4 tỷ</a></li>
				<li class="active has-sub">
				<span class="submenu-button submenu-opened"></span>
				<a href="#">Nhà Đất Gò Vấp bán theo phường</a>
					<ul class="open absolute-sub" style="display: block;">
						<li><a href="#">Phường 8</a></li>
						<li><a href="#">Phường 9</a></li>
						<li><a href="#">Phường 13</a></li>
						<li><a href="#">Phường 16</a></li>
						<li><a href="#">Phường 17</a></li>
					</ul>
				</li>
			</ul>
		</li>
	<li><a href="#">Nhà Đất Quận 12</a></li>
	</ul>
	</div></div>