Prevent style change on root of dropdown

Hey everyone,

I have a CSS dropdown menu using the following code. My only issue is, when any of the sub-headers are hovered the root title becomes left aligned. How can I ensure it stays centred while keeping all others left aligned?

Thanks:

CSS:
ul {
font-family: 'Actor', sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
list-style: none;
z-index:20;
}
ul li {
display: block;
position: relative;
z-index:20;
}
li ul { display: none; }
ul li a {
clear: none;
display:block;
padding:4px;
color: #000;
text-align:center;
text-decoration:none;
font-size:15px;
font-family: 'Actor', sans-serif;
white-space: nowrap;
z-index:20;
}
ul li a:hover { background: #dc0111; text-align:center;}
li:hover ul {
display: block;
position: absolute;
z-index:20;
}
li:hover li {
float: none;
font-size: 11px;
text-align:center;
z-index:20;
}
li:hover a { background: #dc0111; color:#FFF; text-align:left;}
li:hover li a:hover { background: #fff; color:#000; text-align:left;}

Body:
<ul id="menu">
<li><a href="games.php">GAMES</a>
<ul>
<li><a href="link.com" target="_blank">Link01</a></li>
<li><a href="link.com" target="_blank">Link02</a></li>
<li><a href="link.com" target="_blank">Link03</a></li>
<li><a href="link.com" target="_blank">Link04</a></li>
<li><a href="link.com" target="_blank">Link05</a></li>
</ul>
</li>
</ul>

li:hover a { background: #dc0111; color:#FFF; text-align:left;}


In this part of the code, you are saying that ALL li:hover a should be text-aligned left.

And since your submenus are all contained in the li, everything will be aligned left. You need to change the code above to get more specific:


li:hover a {background: #dc0111; color: #fff; }
li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}

li:hover a { background: #dc0111; color:#FFF; text-align:left;}


In this part of the code, you are saying that ALL li:hover a should be text-aligned left.

And since your submenus are all contained in the li, everything will be aligned left. You need to change the code above to get more specific:


li:hover a {background: #dc0111; color: #fff; }
li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}


Hey, thanks for the reply. So are you saying I should directly swap:

li:hover a { background: #dc0111; color:#FFF; text-align:left;}


for:

li:hover a {background: #dc0111; color: #fff; }
li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}
[/QUOTE]

If so I tried this and its not made any difference :-\
Any other ideas?

Problem solved, I simply swapped that last bit for the following:

li:hover a {background: #dc0111; color: #fff; }
li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}
li:hover li a { background: #dc0111; color:#FFF; text-align:left;}
li:hover li a:hover { background: #fff; color:#000; text-align:left;}

Thanks for your help