Sous menus en CSS

**raclif** · 02/01/2009, 13h45

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 :

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
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 html :

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
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

**Macmillenium** · 02/01/2009, 14h05

Bonjour,

Ton code me semble un peu bizarre. Pourquoi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->

?

Ton ul n'est positionné que pour les navigateurs autres que IE ... c'est normal que le rendu ne soit pas le même.
Je te conseille de faire un tour dans la galerie des menus

Sous menus en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager