title: Highlight parent and child navigation menu when active or current
body: <p>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 <a href="http://www.brotfabrik-berlin.de/" rel="nofollow">http://www.brotfabrik-berlin.de/</a> when you hover to a subpage the parent keeps being highlighted. Thank you.</p>
  
  <pre><code>#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;
  </code></pre>