CSS styling of submenu copying style of main menu list item

Question

Here's a client site I've been working on: http://sedonastory.com

On any selected page, when you hover over that page's main menu list item, the links in the dropdown list are the wrong color. They are white and should be dark gray (#444444).

For instance, if I click on the "About" link and go to that page, then hover over the "About" menu link again, the colors are different from the other nonselected menu list items.

I've tried everything I can think of to change the color to gray - I know this should be simple (and probably is)!

#nav 
{ position: absolute; 
  z-index: 300; 
  top: 72px; 
  right: 0; 
  }  
#nav ul {
  list-style: none; 
  margin: 0; 
  padding: 0; 
  }  
#nav ul li { 
  position: relative; 
  float: left; 
  padding: 75px 0 5px; 
  margin: 0 14px 0 0; 
  font-size: 18px; 
  font-weight: bold; 
  }  
#nav ul li a { 
  padding: 0 7px; 
  color: #444; 
  text-decoration: none;
  font-family:'ralewayregular',sans-serif;
  }  
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { 
  color: #931e74; 
  }  
#nav ul li.selected { 
  background: #d6a66d; 
  }  
#nav ul li.selected a { 
  color: #fff; 
  }  
#nav ul li em { 
  position: absolute; 
  left: -10001px; 
  top: -10001px; 
  }  
#nav ul li li { 
  float: none; 
  display: block; 
  padding: 0; 
  margin: 0; 
  border-top: 1px solid #fff; 
  font-size: 14px;color:#444; 
  }  
#nav ul li li:first-child { 
  border-top: 0;
  color:#444; 
  }  
#nav ul li li a { 
  float: none; 
  display: block; 
  padding: 11px 0; 
  color: #444; 
  }  
#nav ul li li.selected a { 
  color: #444;
  background:#F4E2CC; 
  }  
#nav ul li li a:hover, #nav ul li li a:active, #nav ul li li a:focus { 
  color: #a1117c;
  background-color:#F4E2CC; 
  }  

Answer 1

Use child selector to apply white color only for top-level link.

#nav ul li.selected > a {
    color: #fff;
}