-1
votes

Problème de positionnement absolu avec le sous-menu déroulant

Je ne peux pas obtenir un sous-menu absolument positionné pour positionner correctement. En outre, il semble y avoir quelque chose avec le rembourrage, et je ne peux pas le comprendre.

Le code est ici: p>

https://codepen.io/custermonroe/pen/wwwzzev p>

p>

        <li class="dropdown"><a href="javascript:void(0);">Custerism</a>
            <ul class="dropdown-menu">
                <li class="submenu-right"><a 
       href="javascript:void(0);">PHILOSOPHY</a>
                    <ul>
                        <li><a href="javascript:void(0);">CUSTERISM</a></li>
                    </ul>
                </li>
                <li><a href="javascript:void(0);">BEEKIN</a></li>
                <li class="submenu-right"><a href="javascript:void(0);">HELP 
         TOPICS</a>
                    <ul>
                        <li><a href="javascript:void(0);">DRAGONSPEAK</a></li>
                        <li><a href="javascript:void(0);">PATCHES</a></li>
                        <li><a href="javascript:void(0);">GENERAL 
        KNOWLEDGE</a></li>
                    </ul>
                </li>
                <li><a href="javascript:void(0);">NEWS</a></li>


0 commentaires

3 Réponses :


0
votes

Je n'ai pas le temps de chercher et de vous raconter le "pourquoi" cela se produit, mais il y a quelque chose à voir avec l'agent utilisateur.

En outre, ajoutez simplement ce code CSS à votre fichier: p>

p>

.submenu-right ul {
  padding-inline-start: 0;
}


8 commentaires

Cela a aidé, mais avec 100% à gauche, le sous-menu est sur l'élément parent relatif.


Quel navigateur utilisez-vous pour trouver le bogue? J'utilise chrome.


Moi aussi. J'utilise chrome.


@Custer que vous utilisez trop de hacks, comme dans "largeur: 108%". Je pourrais aller chercher à résoudre ces autres problèmes, mais cela dépasse ce sujet. Pour l'instant, encore une fois, apprenez simplement à utiliser correctement les outils de débogage des navigateurs (Chrome est le plus utilisé, bien que Firefox soit bien meilleur).


Je vais regarder une vidéo YouTube pour mieux découvrir la console pour Chrome. Des bonnes références? Merci! (=


@Custer Cette chaîne officielle semble être parfaite et fournit de nombreuses vidéos sur la question: YouTube. com / regarder? Time_Continue = 6 & V = h0xsce08hy8 . Avant cela, assurez-vous de savoir quel est le modèle de la boîte, DOM, BOM, etc.


@Custer Assurez-vous de uppoter les réponses des gens, s'ils vous ont aidé d'une manière ou d'une autre. Aussi, avez-vous essayé d'exécuter votre code localement? Je soupçonne que cela a quelque chose à voir avec le stylo de code.


Je dirige toujours mon code localement; C'était la première fois en utilisant Code Pen, en fait; J'ai utilisé le stylo de code pour illustrer mon code mieux. (-:



0
votes

La joà £ o lucas répondez presque xxx

plus xxx


2 commentaires

Ceux-ci fonctionnent bien en chrome, merci! Mais quand j'ai vérifié Internet Explorer et Edge, ils ne fonctionnent pas. C'est pourquoi j'ai dû ajouter ces hacks comme 108% de largeur et -23 marge.


Merci encore, mon mec, pour avoir pris le temps de répondre à ma question, qui a offensé quelqu'un assez pour lui donner un vote au bas. ; p



1
votes

commenté margin-gauche: -23px; code> et ajouté remplissage: 0; code> de .Submenu-droit UL P> P> P >

<nav class="med-max-show">
  <ul>
    <li class="dropdown"><a href="javascript:void(0);">In Character</a>
      <ul class="dropdown-menu">
        <li><a href="javascript:void(0);">PROFILE</a></li>
        <li><a href="javascript:void(0);">JOURNAL</a></li>
        <li class="submenu-left"><a href="javascript:void(0);">JOIN ME</a>
          <ul>
            <li><a href="javascript:void(0);">RP FORUM</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a href="">Out of Character</a>
      <ul class="dropdown-menu">
        <li><a href="javascript:void(0);">HANGOUTS</a></li>
        <li><a href="javascript:void(0);">GUESTBOOK</a></li>
      </ul>
    </li>
    <li class="dropdown"><a href="javascript:void(0);">Custerism</a>
      <ul class="dropdown-menu">
        <li class="submenu-right"><a href="javascript:void(0);">PHILOSOPHY</a>
          <ul>
            <li><a href="javascript:void(0);">CUSTERISM</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">BEEKIN</a></li>
        <li class="submenu-right"><a href="javascript:void(0);">HELP TOPICS</a>
          <ul>
            <li><a href="javascript:void(0);">DRAGONSPEAK</a></li>
            <li><a href="javascript:void(0);">PATCHES</a></li>
            <li><a href="javascript:void(0);">GENERAL KNOWLEDGE</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">NEWS</a></li>
      </ul>
    </li>
  </ul>
</nav>


3 commentaires

Je pense que je t'aime, mais qu'est-ce que j'ai tellement peur de!?! ??!?!?!?! MERCI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (=


J'ai une question. Pourquoi rembourrer la question? Pourquoi la marge ne serait-elle pas la question? Est-ce parce que la balise absolue à l'intérieur d'une balise relative devient une partie du contenu dans le modèle de boîte de la balise relative?


Rembourrage-Inline-Démarrage: 40px; CSS était appliqué sur UL Etiquette pour le remplacer, j'ai utilisé Rembourrage .