html - 无法定位 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) 和标题中的通用列表 (.sf-menu ul, 。 PageMenu li ul).

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

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