help menu horizontal déroulant

SLC71 · 21 Octobre 2009

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 a 2 niveau ça va mais après je suis paumé total.

Je voudrais que lorsque l on passe la souris sur "catégories" les souscatégories apparaissent. jsuqe là pas de problème. Mais dans certaines sous catégories il y a des "soussouscatégories" qui doivent apparaitre décalé à droite pour ne pas masquer les autres souscatégories et c'est là que ça coince elles apparaissent tout le temps et en masquant les souscaté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

  <!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

 

/* 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*/

Leonick · 21 Octobre 2009

il faut décaler les menus avec des left

voir un exemple de menu sur http://www.recits.champignytriathlon.org/2009/de-ironman-de-roth-a-barcelone

le menu épreuves/résultats a encore un sous menu (soit un 3° sous niveau, en plus du niveau de départ)

SLC71 · 22 Octobre 2009

il faut décaler les menus avec des left

voir un exemple de menu sur http://www.recits.champignytriathlon.org/2009/de-ironman-de-roth-a-barcelone

le menu épreuves/résultats a encore un sous menu (soit un 3° sous niveau, en plus du niveau de départ)

merci j ai trouvé la solution cette nuit. ça porte conseil

Connexion

help menu horizontal déroulant

Sujets conseillés

SLC71

Lien vers le commentaire

Partager sur d’autres sites

Leonick

Lien vers le commentaire

Partager sur d’autres sites

SLC71

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité