#html #css #bigcommerce
#HTML #css #bigcommerce
Вопрос:
у меня есть сайт, 4yourtype.com . На домашней странице есть кнопка «Приложение для диеты по типу крови», я пытаюсь заменить ее кнопкой выпадающего меню. Однако всякий раз, когда я добавляю следующее, выпадающее меню не появляется, но, похоже, работает:
<div class="Cusdropbtn">
<button onclick="cusMenu()" class="Cusdropbtn has-child">I'm here to...</button>
<div id="myDropdown" class="Cusdropbtn-content">
<ul>
<!--edit links here-->
<li><a href="/weight-loss-for-type-o/" class="selected">Weight Loss</a></li>
<li><a href="/energy-management-for-type-o/">Gain Energy</a></li>
<li><a href="/reduce-stress-for-type-o/">Reduce Stress</a></li>
<li><a href="/immune-seasonal-support-for-type-o/">Immune amp;amp; Seasonal Support</a></li>
<li><a href="/type-o-best-sellers/">See Best Sellers</a></li>
</ul>
</div>
</div>
Я попытался заменить и удалить большую часть css и, похоже, просто не могу найти то, что мешает ему функционировать должным образом. Любая помощь будет с благодарностью принята. Я попытался заменить код между <li></li> тегом, в котором находится текущая кнопка.
Комментарии:
1. Можете ли вы объяснить, что не работает должным образом? Также было бы полезно увидеть вашу функцию cusMenu. Обратите внимание, что CSS, вероятно, никогда не «остановит [что-то] от правильной работы». Он просто стилизует элементы, поэтому любая функциональность либо присуща элементам HTML, либо является результатом действия JavaScript на странице.
2. если вы перейдете на эту страницу — 4yourtype.com/jims-test-page вы увидите, что кнопка работает («я здесь, чтобы…»). Часть, которая не работает, заключается в том, что когда я нажимаю на выпадающий список, выпадающий список не отображается, почти так же, как его z-индекс установлен на очень низкое число. Фактическая функциональность кнопки работает. я использовал firebug для замены html текущей кнопки, как упоминалось выше. Если я полностью удалю класс из <ul>, а также из контейнера <div>, кнопка будет работать.
3. Просто не могу понять, какое отдельное свойство css вызывает проблему.
4. Что ж, если это поможет, у меня все работает нормально (Chrome 53.0.2785.143 (64-разрядная версия) и Firefox 49, Kubuntu 16.04).
5. Я только что попробовал это в той же версии Chrome, не могли бы вы показать мне, где вы разместили код Dominic? Я знаю, что если вы поместите его за пределы <ul></ul>, он будет работать
Ответ №1:
Теперь, когда я понимаю вашу проблему, я нашел решение. В вашем меню есть конфликтующие стили: в частности, выпадающий список ( .Cusdropbtn-content ul ) и общие списки в заголовке ( .sf-menu ul , .PageMenu li ul ).
Вы увидите, что оба последних стиля имеют одинаковую или более высокую специфичность и определяются позже в таблицах стилей с более высоким приоритетом, чем у вас.
Мое первое замечание заключается в том, что ваши пользовательские стили должны быть включены после базовых стилей в вашем элементе HEAD, чтобы гарантировать, что любой стиль, который вы перезаписываете, имеет приоритет. Во-вторых, оба .sf-menu ul и .PageMenu li ul установите положение списка в абсолютное, что означает, что он перемещается из своего контейнера. У вас должно быть что-то вроде postion: static !important on .Cusdropbtn-content ul , если вы хотите убедиться, что на него не влияют оскорбительные стили.