How to highlight a parent list item without highlighting children list items?

Question

I'm having trouble with a link list I'm generating using Wordpress, which displays a specific page link as well as all of its children pages links. I'm trying to have the links become highlighted when you hover over them, and then when you click on them and navigate to the page, that page's link stays highlighted. I have found a way to mostly achieve this using:

#sidebar a:hover{
    padding: 7px;
    background-color: #f7f9fe;
    color: #728186;
}
#sidebar ul > li .current_page_item{
    padding: 7px;
    background-color: #f7f9fe;
    color: #728186;
}

but that doesn't allow me to highlight the parent page/li. If I use:

#sidebar li.current_page_item

the child stays highlighted on its page, but on the parent page it also highlights the child item, not just itself.

here's my parsed php:

<ul id="sidebar" class="sidelist">
    <li class="pagenav"><h5>WHAT WE DO</h5>
        <ul>
            <li class="page_item page-item-39 current_page_item"><a href="http://www.autismrecoveryfoundation.org/meet-the-board" title="Meet the Board">Meet the Board</a>
            <ul class='children'>
                <li class="page_item page-item-84"><a href="http://www.autismrecoveryfoundation.org/meet-the-board/being-a-board-member-101" title="Being A Board Member 101">Being A Board Member 101</a></li>
            </ul>
            </li>
        </ul>
    </li>   
</ul>

Here is the template tag I'm using from the Wordpress page about wp list pages (http://codex.wordpress.org/Function_Reference/wp_list_pages):

<?php 
            // use wp_list_pages to display parent and all child pages all generations (a tree with parent)
            $parent = 39;
            $args=array(
             'title_li' => '',
             'child_of' => $parent
            );
            $pages = get_pages($args);  
            if ($pages) {
              $pageids = array();
              foreach ($pages as $page) {
                $pageids[]= $page->ID;
              }

              $args=array(
                'title_li' => '<h5>WHAT WE DO</h5>',
                'include' =>  $parent . ',' . implode(",", $pageids)
              );
              wp_list_pages($args);
            }
        ?>

Answer 1

Update

To display your list of pages in a flat list, set depth to -1:

$args=array(
  'depth' => -1,
  'title_li' => '<h5>WHAT WE DO</h5>',
  'include' =>  $parent . ',' . implode(",", $pageids)
);

That way you won't have to mess around with child selectors, and your subpages won't be contained in your main page's li anymore.

---

Old answer

The problem lies in this selector:

#sidebar ul > li .current_page_item

The #sidebar ul part is looking for ul which descends from #sidebar, but in your code ul is the #sidebar. Also, li .current_page_item would find any .current_page_item inside the li that contains your heading.

Change your selector to this:

#sidebar > li > ul > .current_page_item

You can also use this, since your pages widget has its own class anyway:

.pagenav > ul > .current_page_item