Aller au contenu

help menu horizontal déroulant

SLC71

Par SLC71
dans (X)HTML et CSS

 Partager

Sujets conseillés

SLC71

SLC71

Posté
Posté

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

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...