Menu multilevel (besoin de mettre le sous-menu a gauche!!)

Menu multilevel (besoin de mettre le sous-menu a gauche!!) - HTML/CSS - Programmation

Marsh Posté le 09-02-2009 à 16:46:23    

Bonjour, menu est fonctionnel par contre j'aumerai que lorque j'ai un menu a plus de deux étage j'aimerai que le sous-menu apparaisse a gauche au lieu de la droite.
 
vous pouvez voir le site web c'est le dernier menu a gauche qui nous intéresse.http://www.imacom.qc.ca/ateliercfm
 
J'ai ce menu:
http://imacom.qc.ca/ateliercfm/menu_droite.jpg
 
 
Mais je veux celui-ci.
http://imacom.qc.ca/ateliercfm/menu_gauche.jpg
 
feuille de style:
[PHP]
body {margin:25px; font:11px Verdana,Arial; background:#eee}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left;}
ul.menu ul {position:absolute; top:36px; left:0; background:#dedede; display:none; opacity:0; list-style:none}
ul.menu ul li {
 position:relative;  
 width:153px;
 margin:0;
 vertical-align:middle;
 border: 1px solid #757d86;
}
 
ul.menu ul li a {
 display:block;
 text-align:center;
 background:dedede;
 color:#444444;
 font: 11px arial;
 z-index: 200;
 padding: 5px 10px;
}
ul.menu ul li a:hover {
    background:#0a71c0;
 color:#FFFFFF;}
 
ul.menu ul ul {left:-153px; top:-1px}
ul.menu ul li ul li {}
 
 
ul.menu .menulink1 {font-weight:bold; background:url(../images/a_propos_fr.jpg); width:158px; height:40px}
 
ul.menu .menulink2 { font-weight:bold; background:url(../images/services_fr.jpg); width:158px; height:40px}
 
ul.menu .menulink3 { font-weight:bold; background:url(../images/robotique_fr.jpg); width:158px; height:40px}
 
ul.menu .menulink4 { font-weight:bold; background:url(../images/inspection_fr.jpg); width:158px; height:40px}
 
ul.menu .menulink5 { font-weight:bold; background:url(../images/equipement_serie_fr.jpg); width:158px; height:40px}
 
ul.menu .menulink6 { font-weight:bold; background:url(../images/equipement_autre_fr.jpg); width:158px; height:40px}
 
ul.menu .sub {background:#d1d1d1 url(../images/arrow.gif) 145px 8px no-repeat}
ul.menu .topline {}
[/PHP]
 
 
 
 
Menu html:
[HTML]
<ul class="menu" id="menu">  
<li>
    <a href="index.php?page=preview&amp;cat=4" class="menulink6"></a><ul>        
         
        <li>
          <a href="index.php?page=product&amp;cat=4&amp;prod=17">Appareils d'usinage</a>
<ul>        
          <li><a href="index.php?page=product&amp;cat=4&amp;prod=18">Têtes à usiner et à poser charnières de portes d'armoire</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=19">Appareil usinant contour couvercle de cercueil</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=20">Appareil assemble et usine montants de portes</a></li>
 
<li><a href="index.php?page=product&amp;cat=4&amp;prod=21">Appareil fait l'éboutage planches de bois</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=22">Appareil usinant trous d'injection (traverses de porte d'acier)</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=23">Machines encoches</a></li>
  </ul>
         </li>
         
         
         <li>
        <a href="index.php?page=product&amp;cat=4&amp;prod=24">Systèmes de découpe</a>
        <ul>
 
<li><a href="index.php?page=product&amp;cat=4&amp;prod=25">Appareils de découpe</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=26">Appareil de découpe (véhicule)</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=27">Appareil de découpe, inspection, perforation en moulage</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=28">Appareil de perforation des trous (pièces de véhicule récréatif)</a></li>
  </ul>
         </li>
         
         
         <li>
        <a href="index.php?page=product&amp;cat=4&amp;prod=29">Appareils d'assemblage</a>
 
        <ul>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=30">Appareil d'assemblage et d'inspection 2</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=31">Appareil d'assemblage et d'inspection 1</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=32">Appareil d'assemblage de panneaux</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=33">Appareil d'assemblage</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=34">Presse à barreaux</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=35">Modèles de presse variés</a></li>
<li><a href="index.php?page=product&amp;cat=4&amp;prod=36">Colleuse de styromousse</a></li>
  </ul>
 
        </li>
     
     
 </ul>
  </li>
</ul>
[/HTML]
Merci pour tout l'aide qui peux m'être apporté!

Reply

Marsh Posté le 09-02-2009 à 16:46:23   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed