Why won't my links work correctly? (html and CSS included)?

[howdy]

I want the links on the menu for my website to be yellow and 18px text and when the mouse rolls over them I want them to turn green and go to 24px text. Why is my CSS not working correctly? They either stay yellow and the rollover doesn't work. Or if I take out the regular link CSS, the rollover works but the links turn black with an underline when the mouse isn't on them. Please help!
html:

<div id="footer">
<p>
<ul>
<li><a href="http://www.unl.edu">Portfolio</a></li>
<li><a href="http://www.unl.edu">Resume</a></li>
<li><a href="http://www.unl.edu">About Me</a></li>
<li><a href="http://www.unl.edu">Contact</a></li>
</ul>
</p>
</div>

CSS:

p {
font-family: Arial, Arial, Helvetica, sans-serif;
color: #333;
padding-left: 10px;

}

ul {
list-style-type: none;
display: inline;
font-family: Arial, Helvetica, sans-serif;
width: 400px;
border-width: thin;
border-style: double;
border-color: #FFF;
padding: 15px;
}


li {
list-style-type: none;
display: inline;
padding-left: 40px;
padding-right: 40px;
}

a:link {
color: #FF6;
text-decoration: none;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}

a:hover {
color: #6F3;
text-decoration: none;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}

a:visited {
color:#FF6;
text-decoration: none;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}

#footer {
width: 1000px;
height: 100px;
background-color: #666;
margin: 0px;
clear: both;
text-align: center;
border-color: #7DE68F;
border-style: dashed;
border-width: medium;
}