My webpage menu is set up with inline "li" elements within a "ul". Each "li" has a colored border and contains an "a" tag. I'm looking to change the text color inside the "a" tag and move it 2px up when hovering over it without affecting the li border. How can I achieve this?
EDIT:
Below is the code snippet:
HTML -->
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> <!-- end menu -->
CSSS -->
div#menu ul
{
list-style-type:none;
}
div#menu li
{
margin-left:2px;
display:inline-block;
border: 1px #FFF solid;
border-top:none;
border-bottom-right-radius: 6px 11px;
border-bottom-left-radius: 6px 11px;
}
div#menu li:hover
{
border-top:none;
border: 1px #95d9e4 solid;
}
div#menu li a
{
text-decoration:none;
color:#FFF;
font-size:14px;
margin:0 6px 2px 6px;
line-height:20px;
}
div#menu li a:hover
{
color:#95d9e4;
margin:0 6px 4px 6px;
}