How to change page CSS based on parent menu item?

Question

I'm building a fairly simple site, and I need to alter a background image based on what section the user is in. The main menu only has 2 levels. I'm unsure where I should hook into in order to be able to get the current section (i.e. the root menu item of the current page, see example below) so I can adjust the classes on the page. I was looking at this article as a possible solution, but I only want to alter CSS classes, and that seems like an awful lot of code for such a simple task.

Main Manu:
-- Section 1
   --- Page A
   --- Page B
   --- Page C
-- Section 2
   --- Page D
   --- Page E <- Active page, CSS class "section_2"
   --- Page F

Answer 1

If it is just additional classes you need, you can add additional and unique classes to menu items using the Menu CSS Names or Menu Attributes modules.

Or, you can effect the element of another DIV on hover using pure CSS like below...

HTML

<a id="menu-item" href="#">Menu Item</a>

<div id="container">
    <h1>Change This Background</h1>
</div>

CSS

#container {
    background:blue;
}

#menu-item:hover + #container {
    background:red;
}

See Fiddle here... Affect Another Div on Hover

Answer 2

I solved this by using the Context module. This easily allowed me to add a custom class to the body depending on a selected top-level menu item. Works like a charm.