Sujet Précédent Sujet Suivant

Menu css horizontal, ff et opéra

Résolu/Fermé
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 - 29 avril 2008 à 16:42
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 - 29 avril 2008 à 19:26
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.
A voir également:

2 réponses

Réponse 1 / 2
doctormad Messages postés 430 Date d'inscription mercredi 28 novembre 2007 Statut Membre Dernière intervention 2 avril 2015 99
29 avril 2008 à 18:11
Salut,

Passe ta page au validateur et tu en auras plein des idées ^^

http://validator.w3.org/#validate_by_input
0
Réponse 2 / 2
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 50
29 avril 2008 à 19:26
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>
0

Discussions similaires

Désinstaller Opera
Web. -
Web. -

3 réponses
Que signifie "#FF ..."?
Ocedu47 -
Elie -

7 réponses
se connecter à facebook avec opera
satchan -
boule97 -

1 réponse
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses