Is there another style I should be using to target hover on top menu items in WordPress when using sub menus?
Yes there is, and it’s not WordPress specific, it’s CSS in general.
#sidebar li a:hover {color:red;}
#sidebar li li a:hover {color:blue;}
The first line targets top level About / Works / Exhibitions / Contact / News
The second line targets sub-level (child) of any of them.
You should get the idea now.
Thanks for the reply Paulwpxp, I did have the below in my style sheet but it is only effecting the child targets not the top level menu items, it seems to be working backwards! could a plugin be causing this?
#sidebar li a:hover {
font-family: ‘LatinModernMonoLight10Bold’,arial,serif;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
/* IE 8 */
color: #999999\9;
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
opacity: 0.5;
}
main problem:
your menu links do not seem to lead to any other page than the ‘about’ or home page;
double check your permalink structure; http://codex.wordpress.org/Using_Permalinks
also, there does not seem to be a style that targets the current menu link.
however, if you add any ‘current’ styles, the ‘about’ menu item should react…
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items
I did have the below in my style sheet but it is only effecting the child targets not the top level menu items
That is not true.
If you only have that in the style.css, all ( not just top level ) of <li><a>whatever</a></li> will get that same style applied.
If you have li a and li li a as in my code above, then you can control top level and child. Try adding those 2 lines of css at the bottom most of your stylesheet ( I used pseudo :hover so that you can see it clearly that it works. )
And yes, the about page of the site should link to about page, not to the front page, it’s confusing for users.
Thanks for the replies guys.
Sorry, I made a mistake on the above post. I should have added the below code – I still cant understand thou why it wont target the top menu items. Re: the About page, you’re quite right its bad practice – I’ll make sure to change it to ‘Home’.
#sidebar li .current-menu-item a:link {
color: #000000;
cursor: default;
font-family: ‘LatinModernMonoLight10Bold’,arial,serif;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
/* IE 8 */
color: #000000\9;
/* Netscape */
-moz-opacity: 1;
/* Safari 1.x */
-khtml-opacity: 1;
opacity: 1;
}
Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.
