MaterializeCSS和多级jQuery菜单上的DIV重叠问题
我正在开发一个使用MaterializeCSS作为HTML5 5/CSS3 3框架的小型web应用程序。我想在我的应用程序上添加一个负责的多级菜单。
这是响应多级菜单：https://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
这是我的页面：http://f4lk.net46.net/starter-template/
基本上，我采用了物化入门模板，删除了一些div，并添加了多级菜单代码。它看起来很可怕，重叠，不合适。
我有几个小时的时间来解决这个问题，但我不明白，有些CSS忍者能给我一些建议吗？
回答 2
Stack Overflow用户
发布于 2017-01-11 23:55:14
您有一个float问题。
我查看了您的代码，注意到了一些影响这一点的事情，但最大的两个问题是您的页脚在哪里，浮点不存在。
基本上，您的菜单元素有一个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-脚’在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%宽度。
Stack Overflow用户
发布于 2017-01-12 07:57:56
您所引用的菜单被设计为流到其他项目上。如果要更改该行为，请从移除ul元素上的绝对位置开始，以使菜单返回到正常流。
.dl-menu {
/*position: absolute;*/
}动画不会是一样的，同样的，菜单不是为此而设计的，但是你可以从那里开始。
https://stackoverflow.com/questions/41602465
复制相似问题
腾讯云开发者
