Sous menus en CSS

Salut,

Débutant en CSS, j'essaye d'afficher des sous menus mais j'ai un problème de décalage:
http://leclosdelarc.ovh.org/html/
Passez la souris sur Services puis Autre pour voir mon problème.

De plus le problème est différent sous Firefox 3 et IE7.
Une partie de mon 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
55
56
body {
	margin:114px 0 0 0;
	line-height:16px;
	font-family: Tahoma, Arial;
	background: url(images/body_top_bckg.jpg) no-repeat center top #171c20;
	color:#bed7e6;
	font-size:11px;
	behavior:url(csshover.htc);
}
 
a { color:#018BC1;}
a:hover { text-decoration:none;}
#header {}
#logo {
	padding:30px 0 120px 0;
	color:#fff;
	text-align:center;
	font-size: 9px;
}
#logo a{
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	font-size:24px;
	text-transform:uppercase;
}
#header #logo p {
	font-size: 14px;
}
#menu {color:#fff; text-align:center; }
#menu ul {
z-index: -500;
text-align:center;list-style:none; margin:0; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#f26513;}
#menu li {
float:center;
margin:auto;
padding:0;
}
#menu li a {
font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;
}
#menu li a:hover {
background-color:#f26513;
}
#menu ul li ul {
	display:none
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}

Et ma page HTML

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
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
</head>
<body>
	<!-- header -->
    <div id="header">
    	<div id="logo"><a href="#">Le clos de l'arc</a></div>
    <div id="menu">
     <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="#">Services</a>
                     <ul>                     
                    <li><a href="services1.php">services1</a></li>
                    <li><a href="services2.php">services2</a></li>
                    <li><a href="services3.php">service31</a></li>
                    </ul></li>
            <li><a href="#">Autre</a>
                    <ul>
                    <li><a href="autre1.php">autre1</a></li>
                    <li><a href="autre2.php">autre2</a></li>
                    </ul></li>
            <li><a href="contact.php">Contact</a></li>
                      </ul>
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">
    <div id="sidebar">
 
        <div id="sidebar_text">
 
          </div>
         </div>    
 
 
</body>
</html>

Merci à tous pour vos conseils