a：悬停以填充菜单高度

Question

我有一个简单的水平菜单系统，里面有5个项目。

 <div id="menu">
            <ul>
                <li><a href="~/Menswear.aspx" runat="server">Men</a></li>
                <li><a href="~/Womenswear.aspx" runat="server">Women</a></li>
                <li><a href="~/Kidswear.aspx" runat="server">Kids</a></li>
                <li><a href="~/Stores.aspx" runat="server">Stores</a></li>
                <li><a href="~/Contact.asps" runat="server">Contact</a></li>
            </ul>

        </div>

菜单高40像素，我希望a：将鼠标悬停在菜单上（目前设置为显示灰色背景），以垂直居中的菜单项填充这个40px的高度。

我如何才能最好地实现这一目标？

请参阅http://jsfiddle.net/g2dmudsw/

谢谢。