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:
<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 & Seasonal Support</a></li>
<li><a href="/type-o-best-sellers/">See Best Sellers</a></li>
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 (
.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.