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

Question

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

您可以在 www.nhadatsonnghia.com nha dat go vap 上看到它在您的手机上实时运行。

那么如何使用 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

建议您使用 Absolute position 作为子菜单，这样它就可以与页脚重叠，而不是在展开时推动它。

希望能帮助到你。

固定版本：

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