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都将列表的位置设置为绝对，这意味着它被移出容器。如果您想确保它不受违规样式的影响，您应该在postion: static !important上使用.Cusdropbtn-content ul之类的内容。

无法找到css阻止按钮功能

1 个答案: