Jimboslice Jimboslice - 11 months ago 61
CSS Question

Trouble locating css blocking button functionality

i have a site, 4yourtype.com. On the home page there is a button "Blood Type Diet App" i'm tryin to replace it with a dropdown menu button. However whenever i add the following the drop menu does not appear but does seem to be working:

<div class="Cusdropbtn">
<button onclick="cusMenu()" class="Cusdropbtn has-child">I'm here to...</button>
<div id="myDropdown" class="Cusdropbtn-content">
<!--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>

I have tried replacing and removing most of the css and just cant seem to find what is stopping it from functioning properly. Any help would be greatly appreciated. I tried replacing the code between the
tag where the current button resides.

Answer Source

Now that I understand your problem, I've discovered the solution. You have conflicting styles in your menu: specifically your dropdown list (.Cusdropbtn-content ul) and generic lists in the header (.sf-menu ul, .PageMenu li ul).

You'll see that the latter styles both have the same or higher specificity and are defined later in stylesheets with higher priority than yours.

My first note is that your custom styles should be included after the base styles in your HEAD element to ensure that any style you overwrite have priority. Second, both .sf-menu ul and .PageMenu li ul set the position of the list to absolute, which means that it's being moved out of its container. You should have something like postion: static !important on .Cusdropbtn-content ul if you want to ensure that it is unaffected by the offending styles.