Change Text Color Inside Box On Hover

So right now self teaching myself so html and CSS and I have a slight problem. In my menu bar I have some list items that I want to change color when the mouse hovers over the box,

Solution 1:

#Menu li {
    transition: 2s;
}

#Menu li:hover {
    background-color: rgba(255,165,0,0.5);
    color: red;
}

See the example http://jsfiddle.net/k35rdfhp/1/

The item change background-color and color when hover the box of item, not only the text.

Solution 2:

Try specify color for #Menu li:hover a - http://jsfiddle.net/k35rdfhp/2/

#Menu li a:hover, #Menu li:hover a  {
    color: black;
}

Solution 3:

I modified ASR's answer and added transitions to it.CSS3 has some built in animations that don't require javascript or other js libraries to use

#Menu li:hover {
    background-color: #FFB733;
    background: red;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
}

http://jsfiddle.net/j863v3t7/