无法找到 css 阻止按钮功能

Question

我有一个网站，4yourtype.com。在主页上有一个按钮 "Blood Type Diet App" 我正在尝试将其替换为下拉菜单按钮。但是，每当我添加以下内容时，下拉菜单不会出现，但似乎可以正常工作：

<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; Seasonal Support</a></li>
            <li><a href="/type-o-best-sellers/">See Best Sellers</a></li>
        </ul>
     </div>
 </div>

我已经尝试替换和删除大部分 css，但似乎无法找到阻止它正常运行的原因。任何帮助将不胜感激。我尝试替换当前按钮所在的 <li></li> 标记之间的代码。

Answer 1

既然我了解了您的问题，我已经找到了解决方案。您的菜单中有冲突的样式：特别是您的下拉列表 (.Cusdropbtn-content ul) 和 header 中的通用列表 (.sf-menu ul, .PageMenu li ul).

您会看到后一种样式都具有相同或更高的特异性，并且在样式表中定义得比您的优先级更高。

我首先要注意的是，您的自定义样式应该包含在 HEAD 元素中基本样式之后，以确保您覆盖的任何样式都具有优先权。其次，.sf-menu ul 和 .PageMenu li ul 都将列表的位置设置为绝对位置，这意味着它被移出了它的容器。如果您想确保它不受违规样式的影响，您应该在 .Cusdropbtn-content ul 上设置类似 postion: static !important 的内容。

无法找到 css 阻止按钮功能

Trouble locating css blocking button functionality

html

css

bigcommerce