Bonjour,

Je sollicite votre aide pour régler mon petit problème.
J'essaye de réaliser un menu simple en CSS, mais je bloque au niveau de la mise en forme. J'aimerais ajouter un cadre noir entre chacun de mes boutons comme sur l'image suivante :



Mais je n'arrive pas à obtenir ce résultat.

Voici l'image affichée de mon menu :



Mon code CSS :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
 
div#menu
{
 
}
 
div#menu ul 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
      line-height: 30px;
	white-space: nowrap;
}
 
div#menu li 
{
	list-style-type: none;
	display: inline;
}
 
div#menu li a 
{
	text-decoration: none;
	color: black;
	padding: 7px 6px;
}
 
div#menu li a:hover 
{
	color: white;
      background-color: #B17046;
}

Mon code HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="menu">
   <ul>
	<li><a href="link1.html">Accueil</a></li>
	<li><a href="link1.html">Présentation du 4L Trophy</a></li>
	<li><a href="link2.html">Présentation de la CusTrophy</a></li>
	<li><a href="link3.html">Planning</a></li>
	<li><a href="link3.html">Photos</a></li>
	<li><a href="link3.html">Carnet de bord</a></li>
	<li><a href="link3.html">Nos sponsors</a></li>
	<li><a href="link3.html">Contact</a></li>
   </ul>
</div>

Merci pour votre aide.