Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu déroulant qui ne fonctionne pas

Sujet résolu
    18 octobre 2021 à 19:47:37

    Bonsoir,

    Les sous-menus ne s'affichent pas et je ne vois pas où j'ai pu faire une erreur.

    CSS :

    nav{
        width: 100%;
        margin: 0 auto;
        background-color: white;
        position: sticky;
        top: 0px;
    }
    
    nav ul{
        list-style-type: none;
    }
    
    nav ul li{
        float: left;
        width: 25%;
        text-align: center;
        position: relative;
    }
    
    nav ul::after{
        content: "";
        display: table;
        clear: both;
    }
    
    nav a{
        display: block;
        text-decoration: none;
        color: black;
        border-bottom: 2px solid transparent;
        padding: 10px 0px;
    }
    
    nav a:hover{
        color: orange;
        border-bottom: 2px solid gold;
    }
    
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: white;
        position: absolute;
        width: 100%;
        z-index: 1000;
    }
    nav ul li:hover .sous{
        display: block;
    }
    .sous li{
        float: none;
        width: 100%;
        text-align: left;
    }
    .sous a{
        padding: 10px;
        border-bottom: none;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }
    .deroulant a:after{
        content:" ▼";
        font-size: 12px;
    }

    HTML :

    <!DOCTYPE html>
    <html lang="fr">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/carousel.css">
        <title>SFComptabilité</title>
        <script src="../js/jquery.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="../js/script.js"></script>
    </head>
    <body>
        <header id="navigation">
            <div class="container">
                <div class="row">
                    <nav id="navigation" class="col-sm-12">
                        <ul>
                            <li class="deroulant"><a href="#">Comptabilité générale</a></li>
                                <ul class="sous">
                                    <li><a href="ecriturescomptables.php">Ecritures comptables</a></li>
                                    <li><a href="amortissements.php">Amortissements</a></li>
                                    <li><a href="grandlivre.php">Grand livre</a></li>
                                    <li><a href="balance.php">Balance</a></li>
                                    <li><a href="bulletinsalaire.php">Bulletins de salaires</a></li>
                                    <li><a href="clientsdouteux.php">Clients douteux</a></li>
                                    <li><a href="declarationtva.php">Déclaration de TVA</a></li>
                                    <li><a href="emprunts.php">Emprunts</a></li>
                                    <li><a href="liassefiscale.php">Liasse fiscale</a></li>
                                    <li><a href="rapprochementsbancaires.php">Rapprochements bancaires</a></li>
                                    <li><a href="plancomptable.php">Plan comptable générale</a></li>
                                    <li><a href="ficheidentiteentreprise.php">Fiche d'identité de l'entreprise</a></li>
                                    <li><a href="ficheidentitefournisseurs.php">Fiche d'identité des fournisseurs</a></li>
                                    <li><a href="ficheidentiteclients.php">Fiche d'identité des clients</a></li>
                                    <li><a href="ficheindentitesalaries.php">Fiche d'identité des salariés</a></li>
                                </ul>
                            <li class="deroulant"><a href="#">Comptabilité analytique</a></li>
                                <ul class="sous">
                                    <li><a href="analysefonctionnellecompteresultat.php">Analyse fonctionnelle du compte de résultat</a></li>
                                    <li><a href="analysevariabilitécompteresultat.php">Analyse par variabilité du compte de résultat</a></li>
                                    <li><a href="seuilderentabilite.php">Seuil de rentabilité</a></li>
                                    <li><a href="sig.php">Solde Intermédiaire de Gestion (SIG)</a></li>
                                    <li><a href="caf.php">Capacité d'autofinancement (CAF)</a></li>
                                    <li><a href="bilanfinancier.php">Bilan financier</a></li>
                                    <li><a href="bilanfonctionnel.php">Bilan fonctionnel</a></li>
                                    <li><a href="comparaisonbilan.php">Comparaison des bilans</a></li>
                                    <li><a href="repartitionchargeindirecte.php">Répartition des charges indirecte</a></li>
                                    <li><a href="coutsdirects.php">Coûts directs</a></li>
                                    <li><a href="coutspreetablis.php">Coûts préétablis</a></li>
                                    <li><a href="coutsvariables.php">Coûts variables</a></li>
                                    <li><a href="imputationrationnellechargesfixes.php">Imputation rationnelle des charges fixes</a></li>
                                </ul>
                            <li class="deroulant"><a href="#">Comptabilité budgétaire</a></li>
                                <ul class="sous">
                                    <li><a href="budget.php">Budgets</a></li>
                                </ul>
                        </ul>
                    </nav>
                    <div class="clearfix"></div>
                </div>
            </div>
        </header>
    
    </body>
    
    
    
    </html>

    Merci d'avance à ceux viendront m'aider


    • Partager sur Facebook
    • Partager sur Twitter
      18 octobre 2021 à 22:19:29

      Bonjour, votre HTML n'est pas valide, pour voir et corriger vos erreurs passer votre code au validateur => https://validator.w3.org 

      un identifiant est unique dans un document vous ne pouvez avoir plusieurs id="navigation"

      Un <ul> ne peut pas être enfant direct d'un autre <ul>, seul <li> est enfant direct de <ul>ou <ol>. Placer vos sous menu dans l'item lui-même pas en dehors.

      Pour vous aidez regarder le code donné par http://www.frogweb.fr/

      • Partager sur Facebook
      • Partager sur Twitter
        19 octobre 2021 à 14:37:18

        Bonjour,

        J'ai trouvé d'où provenait mon erreur. Il s'agit tout bêtement d'une balise fermante </li> mal positionnée. Une erreur à la con, tout simplement.

        • Partager sur Facebook
        • Partager sur Twitter

        Menu déroulant qui ne fonctionne pas

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown