Hi! We have a site where the theme we started from is the WordPress 2012 theme and we've customized it, and at some point our customization of the theme has messed up the behavior of the default WordPress Drop Menu in full desktop view: http://cutesportsfan.com 1. We have created the drop down items within the dashboard. The "Site Info" link has 2 drop down items designated under it: <li id="menu-item-11841" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-11841"><a href="http://cutesportsfan.com">SITE INFO</a> <ul class="sub-menu"> <li id="menu-item-11838" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11838"><a href="http://cutesportsfan.com/ad-disclaimer/">Ad Disclaimer</a></li> <li id="menu-item-11839" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11839"><a href="http://cutesportsfan.com/privacy-legal/">Privacy & Legal</a></li> </ul> </li> 2. The drop down items do display in responsive/mobile view. 3. We are using the MyStickyMenu plugin to create the sticky menu on scroll, and the drop downs do display properly once you scroll into sticky mode. 4. We have disabled the MyStickyMenu plugin to see if that's what is causing the issue, and it's not. Even when the plugin is disabled, no drop downs display on the default desktop view 5. The sticky menu does respond to the css that controls the drop down - i.e. colors, etc, so it's definitely specific to desk top view. 6. The sliders below the menu are not responsible as the drop downs still don't work even on a 404 page with no sliders: http://cutesportsfan.com/404.php 7. We are using a custom menu in Appearance >> Menus, but even if we revert back to the default menu, the issue persists. So it seems the customizations we have made to the theme are causing the drop downs to display underneath the basic layers below it. We've spent the past 24 hours trying anything and everything position-y or z-indexy we could find to fix drop downs, and no luck We have quite a bit of experience with css, but are not super experienced with position and z-index, so troubleshooting position issues is a lot of throwing stuff out there to see what sticks Not sure if a fix is something someone would be able to pin point by looking into our code and css? http://cutesportsfan.com/wp-content/themes/cute-sports-fan/style.css Any help is so appreciated! Thank you so much!
Remove the top: 100%; from the .main-navigation li ul rule, and the position: relative; from the .main-navigation li rule. Tested in Firefox and Chrome on a Windows laptop - I take no responsibility for other browsers. Apart from that, your page is a COMPLETELY RIDICULUOS 5,8 MB on load. That's INSANE. You really need to optimize a bit for speed - basically fix your page, man.
Hi, Thank you for the help, it's a start.... unfortunately removing the "relative" causes the 2nd drop down item to float up next to the first item. Almost like it's a tertiary item, but it's not, it should display directly below the first drop down item: http://cutesportsfan.com/wp-content/uploads/2015/07/menu-tems.png
we found the final step! we took a shot in the dark and added a display: block to the drip down li .... .main-navigation li ul li { display: block; } looks like it worked! thank you again for the first part!
Ah, yes, I figured it was intentional, but of course I could've included that as an alternative Glad you figured it out.
No worries , the first two code changes you provided fixed the main issue we were stuck with, so it's very much appreciated. Thank you again!