Menu css horizontal, ff et opéra

Résolu
Bonjour,

j'ai un problème avec mon menu horizontal en css, il ne fonctionne que sous Internet explorer.
Sous firefox et opéra que nenni, les sous-menus ne s'affichent pas, et je ne comprends pas pourquoi.
Voilà le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> Menu CSS </title>
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style type="text/css">

#menu
{
 width: 100%;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;
 top: 0px;
 left: 0px;
 font-family:calibri,verdana;
 font-weight:bold;
}

#menu li
{
 float: left;
 width:180px;
 margin: 0;
 padding: 0;
 border: 0;
}

#menu li a:link, #menu li a:visited
{
 display: block;
 height: 1%;
 color: #ffffff;
 background: #235868;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #ffffff;
 text-decoration: none;
 background: transparent url("fond.png") repeat;
}

#menu li a:hover { background-color: blue; }

#menu .sousmenu,#menu .sousmenu3,#menu .sousmenu4
{
 list-style-type: none;
 display: none;
 margin: 0;
 padding: 0;
 border: 0;
}

#menu .sousmenu li,#menu .sousmenu3 li,#menu .sousmenu4 li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 180px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}

#menu .sousmenu li a:link,
#menu .sousmenu li a:visited
{
 display: block;
 color: #ffffff;
 margin: 0;
 border: 0;
 text-decoration: none;
}

#menu .sousmenu li a:hover
{
 background-color:#047479;
}

#menu li:hover > .sousmenu, #menu li:hover > .sousmenu3, #menu li:hover > .sousmenu4{ display: block; }

.sousmenu3	{list-style-type:none; position:absolute; left:360px; top:27px; width:160px;}
.sousmenu4	{list-style-type:none; position:absolute; left:360px; top:55px; width:160px;}
  </style>
 </head>

 <body style="background-color:grey;">
<ul id="menu">

		<li>
			<a href="#">Accueil</a>
		</li>
		<li>
			<a href="#">Produits</a>
		</li>

<ul class="sousmenu">
		<li>
			<a href="#">Particuliers ></a>
		</li>

<ul class="sousmenu3">
		<li>
			<a href="#">CPL</a>
		</li>
		<li>
			<a href="#">WIFI</a>
		</li>
</ul>
		<li>
			<a href="#">Professionnels ></a>
		</li>

<ul class="sousmenu4">

		<li>
			<a href="#">CPL</a>
		</li>
		<li>
			<a href="#">WIFI</a>
		</li>
		<li>
			<a href="#">&Eacute;thernet</a>
		</li>

</ul>
</ul>
		<li>
			<a href="#">Linux</a>
		</li>

<ul class="sousmenu">
		<li>
			<a href="#">Installation</a>
		</li>
		<li>
			<a href="#">Migration</a>
		</li>

</ul>
		<li>
			<a href="#">Documentation</a>
		</li>

<ul class="sousmenu">
		<li>
			<a href="#">CPL</a>
		</li>
		<li>
			<a href="#">R&eacute;seaux</a>
		</li>
		<li>
			<a href="#">Linux</a>
		</li>
		<li>
			<a href="#">Logiciels</a>
		</li>

</ul>

		<li>
			<a href="#">Services</a>
		</li>

<ul class="sousmenu">
		<li>
			<a href="#">Maintenance</a>
		</li>
		<li>
			<a href="#">D&eacute;pannage</a>
		</li>
</ul>

		<li>
			<a href="#">FAQ</a>
		</li>

<ul class="sousmenu">
		<li>
			<a href="#">Foire aux questions</a>
		</li>
</ul>
 </body>
</html>


Quelqu'un a une idée ?
@ pluche.
Fab.

2 réponses

  1. C'est vrai comme ça ça marche partout, je fermais mes balises <li> aux mauvais endroits.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> Menu CSS </title>
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <link rel="stylesheet" type="text/css" href="text.css"/>
    
     </head>
    
     <body>
    
    <ul id="menu">
    
    		<li>
    			<a href="#">Accueil</a>
    		</li>
    
    		<li>
    			<a href="#">Produits</a>
    		
    
    <ul class="sousmenu">
    		<li>
    			<a href="#">Particuliers ></a>
    		
    
    <ul class="sousmenu3">
    		<li>
    			<a href="#">CPL</a>
    		</li>
    		<li>
    			<a href="#">WIFI</a>
    		</li>
    </ul></li>
    		<li>
    			<a href="#">Professionnels ></a>
    		
    
    <ul class="sousmenu4">
    
    		<li>
    			<a href="#">CPL</a>
    		</li>
    		<li>
    			<a href="#">WIFI</a>
    		</li>
    		<li>
    			<a href="#">&Eacute;thernet</a>
    		</li>
    
    </ul></li>
    </ul></li>
    		<li>
    			<a href="#">Linux</a>
    		
    
    <ul class="sousmenu">
    		<li>
    			<a href="#">Installation</a>
    		</li>
    		<li>
    			<a href="#">Migration</a>
    		</li>
    
    </ul></li>
    		<li>
    			<a href="#">Documentation</a>
    		
    
    <ul class="sousmenu">
    		<li>
    			<a href="#">CPL</a>
    		</li>
    		<li>
    			<a href="#">R&eacute;seaux</a>
    		</li>
    		<li>
    			<a href="#">Linux</a>
    		</li>
    		<li>
    			<a href="#">Logiciels</a>
    		</li>
    
    </ul></li>
    
    		<li>
    			<a href="#">Services</a>
    		
    
    <ul class="sousmenu">
    		<li>
    			<a href="#">Maintenance</a>
    		</li>
    		<li>
    			<a href="#">D&eacute;pannage</a>
    		</li>
    </ul></li>
    
    		<li>
    			<a href="#">FAQ</a>
    		
    
    <ul class="sousmenu">
    		<li>
    			<a href="#">Foire aux questions</a>
    		</li>
    		</ul></li>
    </ul>
     </body>
    </html>