I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.