Проблема с дублированием DIV на MaterializeCSS и многоуровневом меню jQuery

Question

Я разрабатываю крошечное веб-приложение с использованием MaterializeCSS в качестве HTML5/CSS3 Framework. Я хочу добавить многоуровневое меню responsivve в своем приложении.

Это ответное многоуровневое меню: https://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

Это моя страница: http://f4lk.net46.net/starter-template/

В основном я взял шаблон стартера материализовать, я удалил некоторые дивы и я добавил многоуровневый код меню. Это выглядит ужасно, перекрыто, неуместно.

Я часов, пытаясь понять это, и я не понимаю, может кто-нибудь CSS Ninja дать мне несколько советов?

Answer 1

У вас есть проблема 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'> 

И это будет гарантировать, что у вас нет перекрытия.

ВТОРАЯ проблема, которую я вижу, заключается в том, что ваш нижний колонтитул фактически не работает как нижний колонтитул. Это вверху вверху и не внизу, ни нижнему колонтитулу вашей страницы.

Вы можете исправить это в своем файле materialize.css, изменив нижний колонтитул `footer.page-footer.

Изменить его из

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%.