HTML/CSS Menu Active Link Background Not Aligned -

i have html menu uses class show page active within website.

<div id="menu">     <ul>         <li class="activelink"><a href="index.html">home</a></li>         <li><a href="early.html">growing , school</a></li>         <li><a href="career.html">films</a></li>         <li><a href="jamesbond.html">james bond</a></li>         <li><a href="gallery.html">pictures</a></li>     </ul> </div> 

when i've been designing menu, have used firefox preview local files , looked fine. however, when viewed menu in chrome , ie, background shows menu item active out of line vertically within menu.

please see http://jsfiddle.net/c9mzg/

in fact, when i've copied code jsfiddle , viewed in firefox, same problem chrome , ie shows reason, menu on local file still looks absolutely fine. i'm guessing menu styled wrong can't work out. darker red background shows current link should in line vertically lighter red menu.

your #menu 30px tall while ul 40px tall. now, fact li elements have same height , overflow ul. don't notice because have transparent background.

i've added background color can better visualize:

li {background: rgba(0,64,128,0.5);} 

you can see here: http://jsfiddle.net/c9mzg/4/

one possible solution make #menu taller. alternatively, reduce padding on li elements.

btw: you'll notice last li goes on line because of width of #menu, breaking layout.