28172 sujets

CSS et mise en forme, CSS3

Position:static et IE6

Bonjour,

J'essaie de régler mes bugs d'affichage sous IE6, mais là je sèche.

http://www.flickr.com/photos/fxguillois/5383828163/lightbox/

en haut de l'image, la version Chrome (et FF), et en bas, la version IE6.

les deux ul semblent laisser des hauteurs fantôme sous IE6, et j'ai beau les fixer ou les enlever, il finit toujours par se décaler. A tel point que je me demande si c'est pas un élément au dessus qui vient tout repousser...

merci,
ah j'oubliais, la css du menu, si jamais le coeur vous en dit : 

.nav-container { width:970px; margin:0 auto; background: #333;position:relative; z-index:999; }
#nav {  border-bottom: solid 1px #c0c0c0; background: #333; /*z-index:999; position:relative; */ }

#nav .mainlevel a.level-top { height: 31px; }
#nav ul li ul li a { height: 14px; }


/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { text-transform: uppercase; text-align: center; }
#nav li.over { z-index:998; }
#nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none; color: #ffffff; font-size:12px;  }
#nav span { display:block; cursor:pointer; white-space:normal; }
#nav li ul span { white-space:normal; }
#nav ul li.parent a {   }
#nav ul li.parent li a {  }

/* Taille catégories personnalisées */
#nav .first { border-left: 0; }
#nav .last { border-right: 0; }
#nav .nav-1 { width: 130px; }
#nav .nav-2 { width: 116px; line-height:32px; /*background: #647072;*/ }
#nav .nav-3 { width: 106px; line-height:32px; /*background: #776e56;*/ }
#nav .nav-4 { width: 124px;  /*background: #667325;*/ }
#nav .nav-5 { width: 122px; /*background: #556e73;*/ }
#nav .nav-6 { width: 124px; /*background: #c09923;*/ }
#nav .nav-7 { width: 106px; /*background: #c09923;*/ }
#nav .nav-8 { width: 122px; /*background: #c09923;*/ }

	
#nav .nav-2 a span, #nav .nav-3 a span, #nav .nav-4 a span { }

.avirer { width: 242px; background: #c09923; }

/* 0 Level */
#nav li { border: solid 1px #ffffff; float:left; }
#nav li.mainlevel { height: 32px; padding: 5px 0; }
#nav li.active a {  }
#nav a { float:left; padding:0 6px; }
#nav li.over a,
#nav a:hover {  }

/* 1st Level */
#nav ul li,
#nav ul li.active { }
#nav ul li.last { }

#nav ul a,
#nav ul a:hover { font-size: 11px; font-weight: bold; }
#nav ul li a { }

/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:930px; top: 49px; left:-999em; padding: 20px; z-index:100; height:auto; border:1px solid blue;  }
#nav div ul { position:static; width:auto; border:none;  }

#nav ul li { border: none; text-align: left; height:auto; width:304px; float: left;}
#nav ul li a { float: none; padding: 0; display:block;  }
#nav ul li a:hover span { text-decoration: underline; }
#nav ul li a span { padding-left: 8px; background: url(../images/puce-trame-blanche.gif) 0 50% no-repeat;  margin: 7px 0;  }

/* 2nd++ Level */
#nav ul ul,
#nav ul div { position: static; width: 304px; float: none;  margin: 0; padding: 0; top:0; left:0;  border:1px solid #fc0; }
#nav ul ul li,
#nav ul div li { margin: 0; padding: 0; line-height:15px; position: static; border:1px solid red; }

#nav ul li a {   }
#nav ul li a:hover {  }
#nav ul li a,
#nav ul li a:hover {  }
#nav ul span,
#nav ul li.last li span {  }

/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:0; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
<div class="nav-container"> 
    <ul id="nav"> 
        <li id="menucolor3b465b" class="mainlevel level0 nav-1 level-top first parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif.html" class="level-top"> 
<span>Outillage Electroportatif</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-1-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/vibrer-le-beton.html"> 
<span>    VIBRER LE BETON</span> 
</a> 
</li><li class="level1 nav-1-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/cintrer.html"> 
<span>    CINTRER</span> 
</a> 
</li><li class="level1 nav-1-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/surfacer-poncer-le-beton.html"> 
<span>    SURFACER &amp; PONCER LE BETON</span> 
</a> 
</li><li class="level1 nav-1-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/forer.html"> 
<span>    FORER</span> 
</a> 
</li><li class="level1 nav-1-5"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/instrument-laser.html"> 
<span>    INSTRUMENT LASER</span> 
</a> 
</li><li class="level1 nav-1-6"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/accessoires.html"> 
<span>    Accessoires</span> 
</a> 
</li><li class="level1 nav-1-7"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/vibrer-le-beton-1.html"> 
<span>    VIBRER LE BETON</span> 
</a> 
</li><li class="level1 nav-1-8"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/forer-1.html"> 
<span>    FORER</span> 
</a> 
</li><li class="level1 nav-1-9"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/surfacer-poncer-le-beton-1.html"> 
<span>    SURFACER &amp; PONCER LE BETON</span> 
</a> 
</li><li class="level1 nav-1-10"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/cintrer-2.html"> 
<span>    CINTRER</span> 
</a> 
</li><li class="level1 nav-1-11"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/produits-specifiques.html"> 
<span>    PRODUITS SPECIFIQUES</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-1-12"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/pack-multi-machines.html"> 
<span>    PACK MULTI-MACHINES</span> 
</a> 
</li><li class="level1 nav-1-13"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/fraiser-affleurer-defoncer.html"> 
<span>    FRAISER, AFFLEURER, DEFONCER</span> 
</a> 
</li><li class="level1 nav-1-14"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/meuler-tronconner-decouper.html"> 
<span>    MEULER, TRONCONNER, DECOUPER</span> 
</a> 
</li><li class="level1 nav-1-15"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/poncer-polir-decaper.html"> 
<span>    PONCER, POLIR, DECAPER</span> 
</a> 
</li><li class="level1 nav-1-16"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/scier-portatif.html"> 
<span>    SCIER (PORTATIF)</span> 
</a> 
</li><li class="level1 nav-1-17"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/perforer-demolir.html"> 
<span>    PERFORER &amp; DEMOLIR</span> 
</a> 
</li><li class="level1 nav-1-18"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/coller-jointer-decaper.html"> 
<span>    COLLER, JOINTER &amp; DECAPER</span> 
</a> 
</li><li class="level1 nav-1-19"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/multimaster-supercut-gop-dremel.html"> 
<span>    MULTIMASTER, SUPERCUT, GOP, DREMEL</span> 
</a> 
</li><li class="level1 nav-1-20"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/cisailler-grignotter.html"> 
<span>    CISAILLER, GRIGNOTTER</span> 
</a> 
</li><li class="level1 nav-1-21"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/clouer-agrafer.html"> 
<span>    CLOUER, AGRAFER</span> 
</a> 
</li><li class="level1 nav-1-22"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/compresseur.html"> 
<span>    COMPRESSEUR</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-1-23"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/groupes-electrogenes.html"> 
<span>    GROUPES ELECTROGENES</span> 
</a> 
</li><li class="level1 nav-1-24"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/raboter.html"> 
<span>    RABOTER</span> 
</a> 
</li><li class="level1 nav-1-25"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/scier-stationnaire.html"> 
<span>    SCIER (STATIONNAIRE)</span> 
</a> 
</li><li class="level1 nav-1-26"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/rainurer-tronconner.html"> 
<span>    RAINURER, TRONCONNER</span> 
</a> 
</li><li class="level1 nav-1-27"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/visser-boulonner.html"> 
<span>    VISSER, BOULONNER</span> 
</a> 
</li><li class="level1 nav-1-28"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/radio-de-chantier.html"> 
<span>    RADIO DE CHANTIER</span> 
</a> 
</li><li class="level1 nav-1-29"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/percer.html"> 
<span>    PERCER</span> 
</a> 
</li><li class="level1 nav-1-30"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/malaxer.html"> 
<span>    MALAXER</span> 
</a> 
</li><li class="level1 nav-1-31"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/eclairer.html"> 
<span>    ECLAIRER</span> 
</a> 
</li><li class="level1 nav-1-32 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-electroportatif/aspirer-souffler.html"> 
<span>    ASPIRER, SOUFFLER</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolor576e56" class="mainlevel level0 nav-2 level-top parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables.html" class="level-top"> 
<span>CONSOMMABLES</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-2-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/embouts-douilles-visserie.html"> 
<span>    EMBOUTS, DOUILLES &amp; VISSERIE</span> 
</a> 
</li><li class="level1 nav-2-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/fers-de-rabot.html"> 
<span>    FERS DE RABOT</span> 
</a> 
</li><li class="level1 nav-2-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/disques-meules.html"> 
<span>    DISQUES &amp; MEULES</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-2-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/couteaux.html"> 
<span>    COUTEAUX</span> 
</a> 
</li><li class="level1 nav-2-5"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/lames-de-scies.html"> 
<span>    LAMES DE SCIES</span> 
</a> 
</li><li class="level1 nav-2-6"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/melangeurs.html"> 
<span>    MELANGEURS</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-2-7 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/consommables/outils-special-multicuts.html"> 
<span>    OUTILS SPECIAL MULTICUTS</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolor676e57" class="mainlevel level0 nav-3 level-top parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires.html" class="level-top"> 
<span>ACCESSOIRES</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-3-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/ecrous-pinces-bagues-de-copiage.html"> 
<span>    ECROUS, PINCES &amp; BAGUES DE COPIAGE</span> 
</a> 
</li><li class="level1 nav-3-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/semelles-et-tables-de-scies.html"> 
<span>    SEMELLES ET TABLES DE SCIES</span> 
</a> 
</li><li class="level1 nav-3-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/guides-butee-adaptateurs.html"> 
<span>    GUIDES, BUTEE &amp; ADAPTATEURS</span> 
</a> 
</li><li class="level1 nav-3-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/rallonges-cables.html"> 
<span>    RALLONGES &amp; CABLES</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-3-5"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/systeme-de-fraisage-gabarits.html"> 
<span>    SYSTEME DE FRAISAGE &amp; GABARITS</span> 
</a> 
</li><li class="level1 nav-3-6"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/tuyaux-connecteurs-pneumatiques.html"> 
<span>    TUYAUX &amp; CONNECTEURS PNEUMATIQUES</span> 
</a> 
</li><li class="level1 nav-3-7"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/rangements-coffrets.html"> 
<span>    RANGEMENTS, COFFRETS</span> 
</a> 
</li><li class="level1 nav-3-8"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/supports-tables-chariots.html"> 
<span>    SUPPORTS, TABLES &amp; CHARIOTS</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-3-9"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/mandrins-porte-outils-adaptateurs.html"> 
<span>    MANDRINS, PORTE-OUTILS &amp; ADAPTATEURS</span> 
</a> 
</li><li class="level1 nav-3-10"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/chargeurs.html"> 
<span>    CHARGEURS</span> 
</a> 
</li><li class="level1 nav-3-11 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/accessoires/suceurs-manchons-kits-de-nettoyage.html"> 
<span>    SUCEURS, MANCHONS &amp; KITS DE NETTOYAGE</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolor876e58" class="mainlevel level0 nav-4 level-top parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/mesures-controles-1.html" class="level-top"> 
<span>MESURES &amp; CONTRÔLES</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-4-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/mesures-controles-1/detecteur-de-materiaux.html"> 
<span>    DETECTEUR DE MATERIAUX</span> 
</a> 
</li><li class="level1 nav-4-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/mesures-controles-1/lunette-de-chantier.html"> 
<span>    LUNETTE DE CHANTIER</span> 
</a> 
</li><li class="level1 nav-4-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/mesures-controles-1/fil-a-plomb.html"> 
<span>    FIL A PLOMB</span> 
</a> 
</li><li class="level1 nav-4-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/mesures-controles-1/mesure-electrique.html"> 
<span>    MESURE ELECTRIQUE</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-4-5 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/mesures-controles-1/camera-d-inspection.html"> 
<span>    CAMERA D'INSPECTION</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolor556e73" class="mainlevel level0 nav-5 level-top parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2.html" class="level-top"> 
<span>Gros oeuvre et Manutention</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-5-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/pilonneuses.html"> 
<span>    Pilonneuses</span> 
</a> 
</li><li class="level1 nav-5-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/rouleaux-vibrants.html"> 
<span>    Rouleaux Vibrants</span> 
</a> 
</li><li class="level1 nav-5-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/truelles.html"> 
<span>    Truelles</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-5-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/mini-transporteurs.html"> 
<span>    Mini-Transporteurs</span> 
</a> 
</li><li class="level1 nav-5-5"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/accessoires-elevateurs.html"> 
<span>    Accessoires Élévateurs</span> 
</a> 
</li><li class="level1 nav-5-6"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/regles-vibrantes.html"> 
<span>    Règles Vibrantes</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-5-7"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/plaques-vibrantes.html"> 
<span>    Plaques Vibrantes</span> 
</a> 
</li><li class="level1 nav-5-8"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/levateurs-1.html"> 
<span>    ELÉVATEURS</span> 
</a> 
</li><li class="level1 nav-5-9 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/gros-oeuvre-et-manutention-2/betonnieres.html"> 
<span>    Bétonnières</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolor667325" class="mainlevel level0 nav-6 level-top parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1.html" class="level-top"> 
<span>Jardins &amp; Forêts</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-6-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tronconneuse-thermique.html"> 
<span>    Tronçonneuse thermique</span> 
</a> 
</li><li class="level1 nav-6-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tronconneuse-electrique.html"> 
<span>    Tronçonneuse électrique</span> 
</a> 
</li><li class="level1 nav-6-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/elagueuse.html"> 
<span>    Elagueuse</span> 
</a> 
</li><li class="level1 nav-6-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/coupe-bordures.html"> 
<span>    Coupe-Bordures</span> 
</a> 
</li><li class="level1 nav-6-5"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/cisaille.html"> 
<span>    Cisaille</span> 
</a> 
</li><li class="level1 nav-6-6"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tariere.html"> 
<span>    Tarière</span> 
</a> 
</li><li class="level1 nav-6-7"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tondeuse-sans-fil.html"> 
<span>    Tondeuse sans fil</span> 
</a> 
</li><li class="level1 nav-6-8"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tondeuses-a-main.html"> 
<span>    Tondeuses à main</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-6-9"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/aspirateur-souffleur-thermiques.html"> 
<span>    Aspirateur &amp; Souffleur thermique</span> 
</a> 
</li><li class="level1 nav-6-10"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/debroussailleuse-thermique.html"> 
<span>    Débroussailleuse thermique</span> 
</a> 
</li><li class="level1 nav-6-11"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/mousseur.html"> 
<span>    Émousseur</span> 
</a> 
</li><li class="level1 nav-6-12"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/secateur.html"> 
<span>    Sécateur</span> 
</a> 
</li><li class="level1 nav-6-13"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tondeuse-autoportee.html"> 
<span>    Tondeuse autoportée</span> 
</a> 
</li><li class="level1 nav-6-14"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/pompe-a-eau.html"> 
<span>    Pompe à eau</span> 
</a> 
</li><li class="level1 nav-6-15"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/nettoyeur-haute-pression.html"> 
<span>    Nettoyeur haute pression</span> 
</a> 
</li><li class="level1 nav-6-16"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/debroussailleuse-electrique.html"> 
<span>    Débroussailleuse électrique</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-6-17"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/scarificateur.html"> 
<span>    Scarificateur</span> 
</a> 
</li><li class="level1 nav-6-18"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/taille-haies.html"> 
<span>    Taille-haies</span> 
</a> 
</li><li class="level1 nav-6-19"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tondeuse-thermique.html"> 
<span>    Tondeuse thermique</span> 
</a> 
</li><li class="level1 nav-6-20"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/tondeuse-electrique.html"> 
<span>    Tondeuse électrique</span> 
</a> 
</li><li class="level1 nav-6-21"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/dresse-bordures.html"> 
<span>    Dresse-bordures</span> 
</a> 
</li><li class="level1 nav-6-22 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/jardins-forets-1/broyeur.html"> 
<span>    Broyeur</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolore9b925" class="mainlevel level0 nav-7 level-top parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/protection-individuelle-1.html" class="level-top"> 
<span>Protection Individuelle</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-7-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/protection-individuelle-1/protection.html"> 
<span>    Protection</span> 
</a> 
</li><li class="level1 nav-7-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/protection-individuelle-1/holster.html"> 
<span>    Holster</span> 
</a> 
</li><li class="level1 nav-7-3 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/protection-individuelle-1/gants.html"> 
<span>    Gants</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li><li id="menucolor647072" class="mainlevel level0 nav-8 level-top last parent" > 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main.html" class="level-top"> 
<span>Outillage à main</span> 
</a> 
<ul class="level0"> 
<li><ul class="wrapmenu"> 
<li class="level1 nav-8-1 first"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/valise-complete-1.html"> 
<span>    VALISE COMPLETE</span> 
</a> 
</li><li class="level1 nav-8-2"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/ruban-mesure.html"> 
<span>    RUBAN MESURE</span> 
</a> 
</li><li class="level1 nav-8-3"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/servantes-d-atelier-vide-1.html"> 
<span>    SERVANTES D'ATELIER VIDE</span> 
</a> 
</li><li class="level1 nav-8-4"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/chelles-3.html"> 
<span>    ECHELLES</span> 
</a> 
</li><li class="level1 nav-8-5"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/niveau-a-bulle-2.html"> 
<span>    NIVEAU A BULLE</span> 
</a> 
</li><li class="level1 nav-8-6"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/marteau.html"> 
<span>    MARTEAU</span> 
</a> 
</li><li class="level1 nav-8-7"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/jeu-de-cles-btr-1.html"> 
<span>    CLÉS BTR</span> 
</a> 
</li><li class="level1 nav-8-8"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/coffret-de-tournevis-1.html"> 
<span>    TOURNEVIS</span> 
</a> 
</li><li class="level1 nav-8-9"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/clamot.html"> 
<span>    CLAMOT</span> 
</a> 
</li><li class="level1 nav-8-10"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/scies-japonaises-1.html"> 
<span>    SCIE JAPONAISE</span> 
</a> 
</li><li class="level1 nav-8-11"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/pinces-tenailles-1.html"> 
<span>    PINCE &amp; TENAILLE</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-8-12"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/ciseaux-a-bois.html"> 
<span>    CISEAUX A BOIS</span> 
</a> 
</li><li class="level1 nav-8-13"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/seau.html"> 
<span>    SEAU</span> 
</a> 
</li><li class="level1 nav-8-14"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/cutter.html"> 
<span>    CUTTER</span> 
</a> 
</li><li class="level1 nav-8-15"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/accroche-chevron.html"> 
<span>    ACCROCHE CHEVRON</span> 
</a> 
</li><li class="level1 nav-8-16"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/bisaigue.html"> 
<span>    BISAIGUE</span> 
</a> 
</li><li class="level1 nav-8-17"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/plane.html"> 
<span>    PLANE</span> 
</a> 
</li><li class="level1 nav-8-18"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/equerre.html"> 
<span>    EQUERRE</span> 
</a> 
</li><li class="level1 nav-8-19"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/serre-joints.html"> 
<span>    SERRE-JOINTS</span> 
</a> 
</li><li class="level1 nav-8-20"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/coffret-mixtes-1.html"> 
<span>    VALISE COMPLETE</span> 
</a> 
</li><li class="level1 nav-8-21"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/cles-1.html"> 
<span>    CLE</span> 
</a> 
</li><li class="level1 nav-8-22"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/mesure-1.html"> 
<span>    RUBAN MESURE</span> 
</a> 
</li></ul></li><li><ul class="wrapmenu"> 
<li class="level1 nav-8-23"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/etaux.html"> 
<span>    ETAUX</span> 
</a> 
</li><li class="level1 nav-8-24"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/servantes-d-atelier.html"> 
<span>    SERVANTES D'ATELIER</span> 
</a> 
</li><li class="level1 nav-8-25"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/coffret-de-douilles-1.html"> 
<span>    DOUILLE</span> 
</a> 
</li><li class="level1 nav-8-26"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/hache.html"> 
<span>    HACHE</span> 
</a> 
</li><li class="level1 nav-8-27"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/pince-a-decoffrer-arrache-clous-2.html"> 
<span>    PINCE A DECOFFRER &amp; ARRACHE-CLOUS</span> 
</a> 
</li><li class="level1 nav-8-28"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/cisaille.html"> 
<span>    CISAILLE</span> 
</a> 
</li><li class="level1 nav-8-29"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/agrafeuse.html"> 
<span>    AGRAFEUSE</span> 
</a> 
</li><li class="level1 nav-8-30"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/scies-a-main-3.html"> 
<span>    SCIE MULTI-UTILISATION</span> 
</a> 
</li><li class="level1 nav-8-31 last"> 
<a href="http://preprod.debonix.debonix.nbs-test.com/prod/index.php/outillage-a-main/servantes-d-atelier-vide.html"> 
<span>    SERVANTES D'ATELIER VIDE</span> 
</a> 
</li> 
</ul></li> 
</ul> 
</li>    </ul> 
</div>


c'est qu'il est un peu long... Smiley lol
Les menus 100% css sont déconseillés, le mieux c'est d'utiliser javascript pour gérer l'interactivité: ça permet notamment une navigation au clavier et l'ajout d'une latence pour éviter la crise de nerf à la fermeture et l'ouverture des menus. Une des références en la matière est superfish (plugin jQuery).

En plus le code html est plus simple. Smiley smile
Modifié par Patidou (24 Jan 2011 - 14:45)
Y'a du javascript, en prototype (c'est un menu magento).
Et ca marche très bien sur tous les navigateurs sauf sur IE6.

Sans vouloir déprécier ta réponse, je ne crois pas qu'elle s'applique vraiment à mon cas.
Sujet clos
Aller à