[Résolu] Menu déroulant qui ne fonctionne pas par MichaëlPourprix - page 1

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

MichaëlPourprix

18 octobre 2021 à 19:47:37

AbcAbc6

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/

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.

Menu déroulant qui ne fonctionne pas

Menu déroulant qui ne fonctionne pas

Supprimer

Modérer

Signaler le message aux modérateurs