Question

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

基本上我采用了Materialize入门模板，我删除了一些div并且我添加了多级菜单代码。它看起来很可怕，重叠，不合适。

我有几个小时试图解决这个问题而且我不明白，一些CSS Ninja可以给我一些建议吗？

Answer 1

您遇到float问题。

我查看了你的代码，我注意到了一些影响这个问题的事情，但是两个最大的问题是你的页脚位于哪里并且浮动不清楚。

基本上你的menu元素有一个float属性，不会为下一个元素清除，所以其他东西就在它下面。

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

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

.clearfix:after {
 clear: both;
 }

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

您可以将其添加到样式表（style.css one）中，然后将其添加到包装器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;*/
}

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