Services : Actualité Emploi Blog Forum Flux
Formation Trafic : Référencement Liens sponsorisés Affiliation Ecommerce Nom de domaine E-réputation Marketing Mobile Black Hat
Formation Technique : Performance Web Html Css Sql Curl Asp Dotnet Php Ajax Wordpress Twitter Google Analytics

Forum Oseox
Oseox

Menu horizontal déroulant CSS avec sous sous catégorie

Forum Référencement et Trafic
Nous sommes le Dim 19 Nov 2017 20:46

Heures au format UTC [ Heure d’été ]




Poster un nouveau sujet Répondre au sujet
Auteur Message
MessagePosté: Mer 21 Oct 2009 15:07 
Bonjour je ne suis pas sur d être dans la bonne rubrique ni même si ce sujet a sa place sur le site. Je fais confiance à un modérateur pour déplacer ou supprimer le cas échéant.
Voici mon problème, pour ma refonte de site je passe à un menu horizontal déroulant. Jusqu'à 2 niveau ça va mais après je suis paumé total.
Je voudrais que lorsque l on passe la souris sur "catégories" les sous catégories apparaissent. jusque là pas de problème. Mais dans certaines sous catégories il y a des "sous sous catégories" qui doivent apparaitre décalé à droite pour ne pas masquer les autres sous catégories et c'est là que ça coince elles apparaissent tout le temps et en masquant les sous catégories.
J'ai passé des heures à chercher sur le net, dans des tutos et je n arrive pas appliquer
merci de votre aide
voici les codes
HTML
Code:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/mf42_layout3_setup.css" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/mf42_layout3_text.css" />

 
</head>

<body>
  <!-- Main Page Container -->
  <div class="page-container">

   
           
      <!-- A.3 HEADER BOTTOM -->
      <div class="header-bottom">
     
        <!-- Navigation Level 2 (Drop-down menus) -->
        <div class="nav2">
   
         <!-- Navigation item -->
          <ul>
            <li><a href="index.html">Accueil</a></li>
          </ul>
         
          <!-- Navigation item -->
          <ul>
            <li><a href="#">catégories<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="mf42_layout1.html">souscatégories 1</a>
      <ul>
                                        <li><a href="#">soussouscatégo 1</a></li>
                                        <li><a href="#">soussouscatégo 2</a></li>
                                </ul>
</li>
                  <li><a href="mf42_layout2.html">souscatégories 2</a></li>
                  <li><a href="mf42_layout3.html">souscatégories 3</a></li>
                  <li><a href="mf42_layout4.html">souscatégories 4</a></li>
                  <li><a href="mf42_layout5.html">souscatégories 5</a></li>
                </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
          </ul>
   
        </div>
   </div>

   
    </div>


   <!--  END COPY here -->

   
</body>
</html>





CSS
Code:


/* NON-HEADER */
*{padding:0; margin:0;}
body {font-size:62.5%; background-color:rgb(255,255,255); font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/

/* HEADER */
.header {width:960px;}
.header-top {width:954px; height:90px; border-top:solid 3px rgb(175,175,175); border-left:solid 3px rgb(175,175,175); border-right:solid 3px rgb(175,175,175); margin-top:10px; background:rgb(235,235,235); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:954px; border-bottom:solid 3px rgb(175,175,175); border-left:solid 3px rgb(175,175,175); border-right:solid 3px rgb(175,175,175); border-top:solid 1px rgb(175,175,175);}
.header .round-border-topleft {width:25px; height:25px; position:absolute; z-index:100; background:url(../img/bg_head_corner_topleft_25px.gif) no-repeat; margin-top:-3px; margin-left:-3px;}
.header .round-border-topright {width:25px; height:25px; position:absolute; z-index:100; background:url(../img/bg_head_corner_topright_25px.gif) no-repeat; margin-top:-3px; margin-left:932px;}

/*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(225,225,225); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 13px 0 13px; text-decoration:none; font-weight:normal; color: rgb(100,100,100);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(215,215,215); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(215,215,215); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/



Haut
 Profil Envoyer un e-mail  
 
MessagePosté: Jeu 22 Oct 2009 00:09 
Administrateur
Avatar de l’utilisateur
Hello,

Ton bonheur est ici : http://dosimple.ch/articles/Menus-dynam ... ontal.html


Haut
 Profil Envoyer un e-mail  
 
MessagePosté: Jeu 22 Oct 2009 06:04 
en fait la nuit porte conseil, j ai trouvé merci


Haut
 Profil Envoyer un e-mail  
 
Afficher les messages postés depuis:  Trier par  
Poster un nouveau sujet Répondre au sujet  [ 3 messages ] 

Heures au format UTC [ Heure d’été ]


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

Rechercher:
Aller à:  
cron
Abonnez-vous au flux RSS

Blog

Forum

Offres d'emploi

Copyright : Moteur, traduction et optimisation
Merci de votre visite sur le forum Oseox