Menu css horizontal, ff et opéra
Résolu
faboons
Messages postés
291
Date d'inscription
Statut
Membre
Dernière intervention
-
faboons Messages postés 291 Date d'inscription Statut Membre Dernière intervention -
faboons Messages postés 291 Date d'inscription Statut Membre Dernière intervention -
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 :
Quelqu'un a une idée ?
@ pluche.
Fab.
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="#">É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é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é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
-
Salut,
Passe ta page au validateur et tu en auras plein des idées ^^
http://validator.w3.org/#validate_by_input -
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="#">É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é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é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>
