Keeping parent menu items active in child pages

Question

I'm a begginer in php and css. I would like to know how to keep an top-menu item underlined while navigating on child pages. Here is my layout: I have a navigation menu, listing all my parent pages (main pages). Alls these pages will have a unique xxxxx*php file on which their respective childs will be created as well.

On each of these xxxx*php file, there will be, what will look like, a sub menu. declared in my functions.php file. to each xxxxx.php file it's own sub menu. I know how to underline the current page menu item in css. but how do i keep the top menu item (main navigation item ) underlined while on the child pages...

I hope i have made myself clear.

In my fonctions.php file here is how i registered my personnal menus:

function register_my_menu()
{

    register_nav_menus( array(
        'home_menu' => __('Home Menu'),
        'general_menu' => __('General Menu'),
        'produit_menu' => __('Produit Menu'),
        'pro_menu' => __('Pro Menu'),
        'Stage_menu' => __('Stage Menu')
    ) );

This i how i call the menus on each main pages (xxxxx.php)

        <div id="page_title"><a>Atelier de souffleur de verre:</a></div>
            <div> <?php wp_nav_menu( array( 'theme_location' => 'general_menu', 'container_class' => 'atelier_menu' ) ) ; ?> </div>

I create these menus in my admin page and write down the items i want to appear in my menu. It work fine, but as soon as i click on one of these child pages, my main menu item looses it's "underline" text décoration.

Here is my css:

.current-sub-menu-item a { text-decoration:underline !important; }
.current-menu-item a { text-decoration:underline !important; }
.current-parent-page-item a { text-decoration:underline !important; }


/**Menu personnalisés**/
#page_title {text-decoration:none ;font-size:12px;color:#000000;}
#page_title a {text-decoration:underline ;font-size:12px;color:#000000;}
.atelier_menu { position:relative;left:160px;top:-27px;padding: 5px 0; }
.atelier_menu ul {list-style-type: none; }
.atelier_menu ul li { float: left; font-family:Times; }
.atelier_menu ul li a { display: block; padding: 5px 15px; color: #000000; font-size:     12px; text-decoration: none;}

Any help would be greatly appreciated.

Regards,

Siluvatar.

Answer 1

wp_nav_menu, unless altered by a filter, adds a current-menu-parent and a current-menu-ancestor class to the menu items. It sounds like you want the "ancestor" one.

http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes