Menu déroulant caché derrière le main

Sujet résolu

7 juin 2018 à 10:05:24

Bonjour, alors c'est la première fois que je poste sur un forum, soyez indulgent

J'essaye de faire une navbar avec un sous-menu qui se déroule lorsqu'on passe sa souris sur une catégorie du menu. Seulement ce sous-menu qui se déroule est caché par le main.

J'ai bien entendu fais des recherches de mon coté, mais sans succès. J'ai essayé avec z-index mais ça n'a pas l'air de fonctionner.

Merci d'avance pour vos réponses.

voici l'html

 <head>
        <meta charset="UTF-8">
        <title>Nos Produits</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript">
            sfHover = function() {
                var sfEls = document.getElementsByClassName("menu3").getElementsByTagName("LI");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                    }
                    sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
    </head>
    <body>
        <header>
            <div class="containerBis">
                <nav>
                    <ul class="menu3">
                        <li class="testo1"><a href="index.html" class="separateur" id="decalage2">Accueil</a></li>
                        <li class="testo2">
                            <a href="produits.html" class="separateur">Produits</a>
                            <div class="submenu">
                                <ul>
                                    <li><a href="#">Automatisme</a></li>
                                    <li><a href="#">Instrumentation</a></li>
                                    <li><a href="#">Distribution d'énergie</a></li>
                                    <li><a href="#">Entrainement et variation de vitesse</a></li>
                                    <li><a href="#">Composant de cablage</a></li>
                                    <li><a href="#">Sécurité</a></li>
                                    <li><a href="#">Controle et commande industriels</a></li>
                                    <li><a href="#">Connectiques</a></li>
                                    <li><a href="#">Electro-pneumatique</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="testo3"><a href="localisation.html" class="separateur">Où nous trouver?</a></li>
                        <li class="testo4"><a href="contact.html">Comment nous contacter?</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <h1 id="automatisme">Automatisme</h1>
            <h1 id="automatisme">Instrumentation</h1>
            <h1 id="automatisme">Distribution d'énergie</h1>
            <h1 id="automatisme">Entrainement et variation de vitesse</h1>
            <h1 id="automatisme">Composant de cablage</h1>
            <h1 id="automatisme">Sécurité</h1>
            <h1 id="automatisme">Controle et commande industriels</h1>
            <h1 id="automatisme">Connectiques</h1>
            <h1 id="automatisme">Electro-pneumatique</h1>
        </main>
    </body>

et le css

nav > ul > li{
    float: left;
    position: relative;
    z-index: 1000;
}
.submenu{
    display: none;
    z-index: 1000;
}
nav{
    width: 100%;
}
nav > ul::after{
    content: "";
    display: block;
    clear: both;
}
nav a{
    display: inline-block;
    text-decoration: none;
    
}
nav > ul > li > a{
    padding: 20px 30px;
    color: white;
    z-index: 1000;
}
nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: -40px;
    z-index: 1000;
}
.submenu li{
    border-bottom: 1px solid #CCC;
}
.submenu li a{
    padding: 12px 28px;
    font-size: 1.08em;
/*    color: #222538;*/
/*    background-color: #ccc;*/
    width: 260px;
}
/*
.testo2:hover{
    border-top: 5px solid #e44d26;
    background-color: rgba(228, 77, 38, 0.15);
}*/
.containerBis{
    background-color: rgba(128, 54, 54, 1);
    width: 1536px;
    height: 150px;
    display: flex;
    flex-direction: column;
    margin: auto;
    z-index: 10;
    position: relative;
    top: -20px; left: 0px;
    overflow: hidden;
}

voici a quoi ressemble mon site:

-
Edité par MelvynRouault1 7 juin 2018 à 10:10:10

BVGraphiste

7 juin 2018 à 10:22:40

Salut,

C'est le 'overflow:hidden;' de .'containerBis' qui pose problème. ton menu apparait correctement (du moins sur le test que j'ai fais).

Si tu as un problème avec le calcul de la taille du au float sur ton menu utilise le même clearfix qu'avec ton 'nav > ul'.

MelvynRouault1

7 juin 2018 à 10:35:21

Merci, j'ai énormément de mal avec cette propriété css (overflow) mais en l'enleveant ça a effectivement marché.

Mais je n'ai pas bien compris ce que tu voulais me dire par la taille de mon float et le clearfix.

BVGraphiste

7 juin 2018 à 10:45:38

Pour le 'overflow' :

Il faut garder en tête qu'il permet de gérer les éléments qui sortent du parent. Si aucun élément n'est susceptible de dépasser le parent, pas besoin de l'utiliser.

Pour le 'clearfix' (l'utilisation d'un pseudo sélecteur gérer les problèmes de float.), c'est ceci:

nav > ul::after{
    content: "";
    display: block;
    clear: both;
}

Pour le float :

Quand un élément est placé en 'float', il sort du flux, c'est à dire que le parent ne prends plus sa taille en compte (d'où un éventuelle problème de taille). Ça peut être corrigé via l'utilisation d'un 'overflow: hidden' ou d'un 'clearfix' (à préférer !).

J'espère t'avoir éclairé

MelvynRouault1

7 juin 2018 à 10:47:17

Ah je vois, merci beaucoup pour tes explications et d'avoir donné un peu de ton temps