DIV MaterializeCSS 和多级 jQuery 菜单的重叠问题

Question

我正在使用 MaterializeCSS 作为 HTML5/CSS3 框架开发一个小型网络应用程序。我想在我的应用程序中添加响应式多级菜单。

基本上我采用了 Materialise 入门模板，我删除了一些 div 并添加了多级菜单代码。它看起来很糟糕，重叠，不合时宜。

我花了好几个小时想办法解决这个问题，但我不明白，一些 CSS 忍者可以给我一些建议吗？

Answer 1

您遇到了 float 个问题。

我查看了您的代码，发现有几件事对此有影响，但两个最大的问题是您的页脚所在的位置和浮动清除不存在。

基本上你的菜单元素有一个浮点数属性，下一个元素没有被清除，所以其他东西就在它下面。

解决此问题的最新方法是添加 clearfix css 属性.

.clearfix:before,
.clearfix:after {
 content: "";
 display: table;
 }

.clearfix:after {
 clear: both;
 }

.clearfix {
 zoom: 1; /* ie 6/7 */
}

您将其添加到样式表（您的 style.css 样式表）并将其添加到包装器 div。在这种情况下：

 <div id='dl-menu' class='dl-menuwrapper clearfix'>

这将确保您没有重叠。

我看到的第二个问题是您的页脚实际上并不像页脚。它一直在顶部，而不是页面底部或页脚。

您可以通过修改 `footer.page-footer.

来修复 materialize.css 文件中的问题

从

更改

footer.page-footer {
margin-top: 20px;
padding-top: 20px;
background-color: #ee6e73;
}

到

footer.page-footer {
margin-top: 20px;
padding-top: 20px;
background-color: #ee6e73;
/*ADD THESE LINES*/
position: fixed;
bottom: 0;
width: 100%;
}

这会将您的页脚放在页面底部，占浏览器宽度的 100%。

Answer 2

您引用的菜单旨在覆盖其他项目。如果您想更改该行为，请先删除 ul 元素上的绝对定位，以使菜单恢复正常流程。

.dl-menu {
 /*position: absolute;*/
}

动画将不一样，同样，菜单不是为此设计的，但您可以从那里开始。

DIV overlapping issue on MaterializeCSS and multilevel jQuery menu