Question

I’m trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely “li a” element.
I’ve put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/

Answer 1

You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.

The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:

.Menu li a:hover {
    background-color: rgba(0,0,0,0.3);
}

and it is working as expected. See http://jsfiddle.net/muNFY/