Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #6027

    i open a new thread for a little question, otherwise it will be too confusing.

    as the thread shows it is possible to highlight the parent menu item when a child page is selected.

    is it possible to do this with the hover effect also?

    it would be nice to keep a the current parent highlighted when hovering over a child.

    best regards


    any news?

    what i am trying to achieve is something like when you hover to a subpage the parent keeps being highlighted.

    i tried

    .nav .current-menu-parent a:hover {color:#fff;}

    no luck so far




    #menu-navigation li:hover a > span {
    color: #8BBF00;

    to your CSS, this will color your “Leseproben” green when you’re hovering a sub item.

    Also add

    #menu-navigation li:hover a > strong {
    color: #fff;

    To keep your “Buchvorstellung” white.


    hey chris this is working, but it changes the submenu items to be highlightet in white all the time too.

    it’s hard to distinguish the hover for a submenu now.

    how can i get the normal grey color back if not hovering over a subpage?

    all my best



    the last code I provided wasn’t entirely correct.

    It should be `#menu-navigation ul li ul li:hover a > strong {

    color: #FFFFFF;


    In your style1.css you can find

    #top .nav li ul a

    and replace it by

    #top .nav li ul a strong,#top .nav li ul a

    This should work :)


    sorry chris, this doesn’t work either.

    if i do so the submenu gets some more lines and the parent isn’t highlighted anymore.


    hey chris,

    if i add

    .nav li:hover a > span {color: #8BBF00;}

    it works fine for the menu description just the title doesn’t work with both of the provided solutions.

    any other ideas? i know it has to work – since there are wordpress pages with this kind of behaviour.

    best regards




    I’m pretty certain what I provided should work. I suggest you start with a clean CSS file and apply the provided code again.


    hey chris i got this thing solved.

    the problem was that the sub-menu items also have “strong” tags and they are highlighted everytime the same as the main menu-item by the code provided from you (because of the a > strong).

    i don’t know where you can delete the “strong” brackets for the sub-menu, so i simply added a css-class named “parent” for the parent-menu-item (in my case “buchvorstellungen”) via the wordpress menu manager.

    i succeeded by adding the following into the style1.css:

    .parent:hover a {color: #fff;} /* to make the main menu white*/
    .parent:hover a span {color: #8BBF00;} /* to make the menu description green */

    this keeps the main menu highlighted and! the sub menu gray when not hovering over them.

    a curious thing is that taking the “a” infront of the hover (which i think is the common way) won’t work.

    best regards



    hey chris – i even find a solution without adding any css class to the menu-item.

    in the style1.css simply change

    .nav .current-menu-item a, .nav li a:hover {color:#fff;}
    .nav .current-menu-item a, .nav li:hover a {color:#fff;}


    .nav li a:hover span, .nav .current-menu-item a span {color: #8bbf00;}
    .nav .current-menu-item a span, .nav li:hover a span {color: #8bbf00;}

    this should do the trick and is also the best solution because it will work automaticly for every sub page from your menu and you won’t have to add css classes all the time by the wordpress 3.0 menu manager. the little secret was to put the “a” behind the hover.

    all my best


Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘navigation current parent highlight hover’ is closed to new replies.