Make text in drop down menu white - html

Question

This is my website.. when you hover over the nav items and a drop down list appears, i want the drop down list to have white text permanently, not turn white.
Also if anyone knows how to make it so when you hover over the menu items a black line appears under the word not the whole background of the word goes black?
http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/
#nav {
padding: 50px;
width: 924px;
height: 100px;
float: none;
}
#nav ul {
list-style: none;
margin-left: 5px;
width: 1000px;
display: table;
}
#nav a {
text-decoration: none;
color: #161717;
}
/*hide sub menu*/
#nav li ul {
display: none;
}
/*show and position*/
#nav li:hover ul {
display: block;
position: absolute;
margin-left: 0px;
margin-top: 0px;
}
/*main nav*/
#nav li {
width: 140px;
font-size: 14px;
display: inline-block;
-webkit-transition: all ease 0.3s;
}
#nav li:hover {}
/*sub nav*/
#nav li li {
color: white;
display: block;
background-color: black;
font-size: 11px;
padding-top: 5px;
padding-left: 5px;
width: 100px;
}
#nav li li:hover {
background-color: #A83133;
}
#nav a:hover {
color: white;
}
<div id="nav">
<div id="firstnav">
<ul>
<span class="font4"><li>SIGN IN</li>
<li>SIGN UP</li>
<li>MY TRIP</li>
</ul></span>
</div>
<ul>
<li>DESTINATIONS
<ul>
<li>Popular Places
</li>
<li>Other places
</li>
</ul>
</li>

Answer 1

I'm unsure if your question is about your top-link turning black when not being hovered
The reason this is happening is you put your hover on your a-element.
a-tags are by default inline elements. Which means they will only take up as much space as the text.
This means that when you hover on your li-element the hover on your link is no longer in effect.
You could change the color of your link when you hover on your li-element instead.
#nav li:hover a {
color:white;
}
As for the black line.
You could just add a border bottom to either your li-elements(if you want it to be the full lenght) or your a-elements(if you want it to only be as long as your word)
#nav li:hover
{
border-bottom: 1px solid #000;
}
Edit: This is a sollution for your top menu-item turning black when hovering. Was this your issue or did you want to change the color of your sub-items?
If so you can just do the following
#nav li li a
{
color:white
}

Answer 2

so the submenu should always have white text?
#nav ul li ul a {
color:#ffffff;
}
but i would recommend to do it with classes... so you do not have such large selectors and you can easily use that styling on other pages.
furthermore if you need to change the html tree or instead of using a list perhaps a div it wont work anymore. so go for classes :).
greetings timotheus