Menu horizontal CSS

Bonjour,

J'ai un problème avec mon menu horizontal en CSS qui me décale tout mon texte. Pourtant le code HTML est bien correct.

Mon fichier style.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
body {
	background-color:#f5f5dc; /*On définit la couleur de fond qui va être utilisée sur l'ensemble du site */
	} 
ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:100px;
 background-color:#f5f5dc;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 }

Mon fichier index.html :

Code:

1
2
3
4
5
6
7
8
9
10
<link rel="stylesheet" type="text/css" href="style.css"> 
...
<div>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="catalogue.php">Catalogue</a></li>
<li><a href="connect.php">Se connecter</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

J'ai ensuite une liste à puces avec <li></li> mais qui ne s'affiche pas, le texte n'est pas du tout aligné. D'où le problème peut t-il venir ? Merci.