I am building a menu plugin that utilizes jquery and css to style and interact with a custom menu. The plugin works as intended in the default theme but in most other themes there are lots of issues with style inheritance (mainly with hovers). I managed to get the plugin css loaded after the theme styles using wp_enqueue_style() but attempting to override the theme css (even a direct copy of selectors) doesnt seem to work. Example and github sources are below:
Example of issue. Mouseover the links on side to see hover style issues
the exact style being applied during hover is this:
.widget li:hover {
background-color: #2183c4;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px;
color: #fff;
}
Should be the following for the plugin only:
.widget li:hover {
background-color: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius: none;
border-radius: none;
}