Highlight parent and child navigation menu when active or current - html

Question

Would someone show me how to highligh parent and child navigation menu when active or current. Is it possible to highlight the parent menu item when a child page is selected. what i am trying to achieve is something like http://www.brotfabrik-berlin.de/ when you hover to a subpage the parent keeps being highlighted. Thank you.
#menu {
font-weight:700;
list-style:none;
width:990px;
margin:0px auto 0px auto;
height:29px;
padding:0px 0px 0px 0px;
/* Rounded Corners */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #, #);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));
/* Borders */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px 4px 5px;
margin-right:0px;
margin-top:0px;
border:none;
z-index: 1;
#menu li:hover {
border: 1px solid #777777;
padding: 2px 4px 4px 4px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
#menu li a {
font-family:Arial Narrow;
font-size:15px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 0px 0px 0px #000;
#menu li:hover a {
color:#161616;
text-shadow: 0px 0px 0px #ffffff;

Answer 1

I would usually achieve this by adding a current class to the <li> of the navigation link. So if you are viewing home.html the navigation code would be like so:
<ul id="menu">
<li class="current">Home</li>
<li>About</li>
<li>Another page</li>
</ul>
Then I would style the current class by using the hover style of the link, or you could define a different style, for example:
#menu li.current a {
font-weight: bold;
}
If the <li> contains a sub menu (another <ul>), I would target the CSS like this:
#menu > li > a {
/* this would target the parent link */
}
And to target submenu links I would do:
#menu ul ul a {
/* this would target submenu links */
}