Problème de menu

Bonjour à tous.

Je suis en train de créer un site web, et j'ai un problème sur mes menus.

Voila une image : http://img206.imageshack.us/img206/812/testmenuwk5.png

Les flèches noires correspondent à l'écart que j'aimerais combler.

Voila le code 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
#menu
{
   float: left;
   width: 125px;
}
 
.element_menu
{
   background-color: white;
 
   border: 2px solid #9cde93;
 
   margin-bottom: 20px;
   padding-top: 0px;
}
 
 
.element_menu h3
{   
   color: #75ace3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 25px;
}
 
.element_menu a
{
   text-decoration: none;
   color: #B3B3B3;
}
 
.element_menu a:hover
{
   color: #98dc90;
   text-decoration: underline;
 
   position: relative;
   left : 5px;
}
 
.element_menu a:active
{
   font-weight: bold;
   color : #51ce40;
}

Et voila le code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
       <div id="menu">       
           <div class="element_menu">
		     <p>
			 <img src="images/site.png" alt="Site" />
			 </p>
               <ul>
                   <li><a href="accueil.php">Accueil</a></li>
                   <li><a href="forum.php">Forum</a></li>
                   <li><a href="connexion.php">Connexion</a></li>
				   <li><a href="inscription.php">Inscription</a></li>
               </ul>
           </div>