Correction du problème de l'affichage incorrect du menu déroulant CSS

Cet article vise à résoudre le problème de l'affichage incomplet du sous-menu déroulant CSS. En analysant le code HTML et CSS, nous pouvons trouver les raisons du chevauchement du sous-menu et fournir des exemples de code modifiés pour aider les développeurs à afficher correctement les menus déroulants à plusieurs niveaux. Le problème principal réside dans la méthode de positionnement des éléments sous-menu. En supprimant le positionnement absolu et en ajustant les styles connexes, le problème de l'affichage incomplet du sous-menu peut être résolu efficacement et l'expérience utilisateur peut être optimisée.

Analyse des problèmes

Lors de la création de menus déroulants à plusieurs niveaux, un problème commun est que le sous-menu (en particulier le sous-menu imbriqué multicouche) ne s'affiche pas correctement, provoquant la chevauchement des éléments de menu et seul le dernier sous-menu est affiché. Cela est généralement causé par une mauvaise utilisation des propriétés de positionnement CSS.

Dans le code fourni, le problème se trouve sur les deux sélecteurs: .Sub-host ul li et. Subomain ul li, tous deux position: absolue; ensemble. Le positionnement absolu déconnecte ces éléments de liste du flux de documents, les faisant s'empiler et finalement le dernier est affiché.

Solution

Pour résoudre ce problème, vous devez supprimer la position: absolue; Propriétés de .Sub-host ul li et. subdomain ul li. Dans le même temps, afin d'assurer l'affichage correct du sous-menu, certains ajustements du CSS sont également nécessaires.

Ce qui suit est le code CSS modifié:

 * {
  Dimensionnement en boîte: Border-Box;
}

corps {
  marge: 0;
}

en-tête {
  marge: 0px;
  Font-Family: Arial, Helvetica, Sans-Serif;
  taille de police: 30px;
}

en-tête .Menu {
  marge: 0px;
  Color en arrière-plan: orange;
}

en-tête nav ul {
  marge: 0px;
}

un {
  Décoration du texte: aucune;
}

.menu ul li {
  Affichage: bloc en ligne;
  marge: 20px;
  rembourrage: 20px;
  Police-poids: Bold;
  Couleur: noir;
}

ul li: Hover {
  Color en arrière-plan: RVB (132, 127, 127);
  Couleur: RVB (249, 249, 249);
}

.sub-menu1 {
  Largeur: 200px;
  Affichage: aucun;
  Color en arrière-plan: orange;
  Position: absolue;
  marge-gauche: -20px! IMPORTANT;
  rembourrage: 0px! IMPORTANT;
  Transform: Translatey (20px);
}

.Sub-menu1 li {
  Largeur: 200px;
  Marge: 0px! IMPORTANT;
}

.dropdown_menu: Hover ul {
  Affichage: bloc;
}

.Sub-menu1 li: Hover {
  Color en arrière-plan: RVB (103, 197, 109);
  Couleur: RVB (249, 249, 249);
}

.Sub-host ul li {
  Largeur: 200px;
  Color en arrière-plan: vert;
  Affichage: aucun;
  Marge: 0px! IMPORTANT;
  rembourrage: 20px! IMPORTANT;
  Transform: tradlate (140px, -55px);
}

.Sub-domain ul li {
  Largeur: 200px;
  Color en arrière-plan: vert;
  Affichage: aucun;
  Marge: 0px! IMPORTANT;
  rembourrage: 20px! IMPORTANT;
  Transform: tradlate (140px, -55px);
}

.Sub-domain ul li {
  Affichage: aucun;
}

.Sub-host: Hover li {
  Affichage: bloc;
}

.Sub-Domain: Hover li {
  Affichage: bloc;
}

.Sub-menu2,
.sub-menu3 {
  Position: absolue;
  hauteur: 0;
}

Modifications clés:

• Supprimé la position: absolue; Propriétés dans .Sub-host ul li et. subdomain ul li.
• Ajouté .sub-menu2, .sub-menu3 {position: absolu; hauteur: 0; } Pour corriger la hiérarchie et les problèmes de hauteur du sous-menu.

Code html

Ce qui suit est le code HTML correspondant, qui reste inchangé:

 

<adal>

  <meat charset="UTF-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">

    <title> Menu déroulant 

    <link rel="Stylesheet" href="style.css">


 head>

</title>

  <dique>

    <nav class="menu">

      <ul>

        <a href="#">
          <li> Home </li>
        </a>
        <li> à propos de nous </li>
        <li> Contactez-nous </li>
        <li class="dropdown_menu">
          Services
          <ul class="sub-menu1">

            <li class="sous-host">
              Hôte
              <ul class="sub-menu2">
                <li> 1 mois </li>
                <li> 3 mois </li>
                <li> 6 mois </li>
                <li> 12 mois </li>


              </ul>



            </li>

            <li class="sub-domain">
              Domaine
              <ul class="sub-menu3">
                <li> .ir </li>
                <li> .com </li>
                <li> .org </li>
              </ul>

            </li>


          </ul>

        </li>


      </ul>

     nav>

  -header>





</nav></dique></meat></adal>

Choses à noter

• Contexte en cascade: Comprendre le contexte en cascade du CSS est crucial pour gérer les hiérarchies de menu complexes. Assurez-vous que la valeur Z-Index de l'élément parent est réglée correctement pour éviter d'être obscurcie par d'autres éléments.
• Compatibilité: testez votre menu sur différents navigateurs pour vous assurer qu'il est affiché normalement dans divers environnements.
• Conception réactive: considérez l'effet d'affichage à différentes tailles d'écran et utilisez des requêtes multimédias pour s'adapter aux appareils mobiles.
• Accessibilité: assurez-vous que le menu peut être navigué à l'aide du clavier et fournissez au lecteur d'écran des balises sémantiques appropriées.

Résumer

En supprimant le positionnement absolu inutile et en ajustant raisonnablement le style CSS, le problème de l'affichage incomplet des menus déroulants à plusieurs niveaux peut être résolu efficacement. N'oubliez pas que la compréhension du mécanisme de localisation et du contexte en cascade de CSS est la clé pour créer des interfaces Web complexes. Au cours du processus de développement, les tests et débogage continus garantissent que le menu fonctionne correctement dans toutes les situations et offre une bonne expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!