Présentation d'un menu en CSS

Voila mon problème 8-),

J'ai créer un menu avec CSS mais les button ne sont pas aligner, quand je met mon curser sur l'un d'eux il bouge, ainsi que quand je met de texte un peut long sur le menu le button décale un petit peut des autres.

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
#menu a {
 
 
 
 
 width:100%;
 color:white;
 
 background: url("images/menu/basic.png") no-repeat;
 
 	display: block;
    position:relative;left:110px;top:5px;
	margin: 0px 60px 0px 0px;
	padding: 6px 10px 60px 54px;
text-align: left;
 
 
 
	text-decoration: none;
 
	font-size: 14px;
 
 
 
 }
#menu a:hover {
background:url("images/menu/hover.png") no-repeat left top;
margin: 0px 60px 0px 0px;
 }

html:

Code:

1
2
3
4
5
6
7
8
9
10
<div id="menu">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">Tuto</a></li>
  <li><a href="#">Community</a></li>
    <li><a href="#">Partenaires</a></li>
 
    </ul>
</div>