Quand je rétréci ma page ou zoom la page, le menu se déforme
Voici le code du menu :
ul#menu
{
font-size: 18px;
display: block;
margin: 0 auto;
padding: 0;
height: 46px;
line-height: 46px;
list-style-type: none;
background: url(http://www.limehit.fr/images/menu.png) repeat-x;
}
ul#menu li
{
border-right: 1px solid #ccc;
}
ul#menu li,
ul#menu li a
{
margin: 0;
padding: 0;
float: left;
text-align: center;
width: 140px;
font-weight: bold;
display: inline-block;
}
ul#menu li a:hover,
ul#menu li.current { background: url(http://www.limehit.fr/images/menu.png) repeat-x 0px -46px; }
ul#menu li.register { background: url(http://www.limehit.fr/images/menu.png) repeat-x 0px -92px; }
ul#menu li.register a:hover { background: url(http://www.limehit.fr/images/menu.png) repeat-x 0px -138px; }
ul#menu li.vip { background: url(http://www.limehit.fr/images/menu.png) repeat-x 0px -184px; }
ul#menu li.vip a:hover, ul#menu li.vip.current { background: url(http://www.limehit.fr/images/menu.png) repeat-x 0px -230px; }
ul#menu li a,
ul#menu li
{
text-decoration: none;
color: #DCDCDC;
background-position: 0px 0px;
}
ul#menu li a:hover,
ul#menu li.register a:hover,
ul#menu li.current,
ul#menu li.vip:hover,
ul#menu li.vip.current
{
color: #FFF;
} <!DOCTYPE html>
<html>
<head>
<title>Page de test</title>
</head>
<body>
<ul id="menu">
<li class="vip current">Test</li>
<li class="current">Test</li>
<li class="register"><a href="#">Test</a></li>
<li><a href="#>Test</a></li>
</ul>
</body>
</html>
