Les éléments du sous-menu ne sont pas alignés avec l'élément parent

J'essaie de créer un menu déroulant, mais chaque fois que je survole un menu parent, le menu enfant ne s'aligne pas avec celui-ci. J'ai vécu de nombreux exemples et j'ai toujours le même résultat.Les éléments du sous-menu ne sont pas alignés avec l'élément parent

Mon code CSS est

#mainNav { 
    margin-top: 20px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    overflow: hidden; 
    background-color: #BBFFFF; 
    zoom: 1; 
} 

#mainNav li { 
    float: left; 
    list-style: none; 
} 
#mainNav li a { 
    color: #000000; 
    display: block; 
    width: 80px; 
    font-size: 14px; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
    padding: 7px 0px 7px 0px; 
    border-right: 1px solid #999;  
    zoom: 1; 
} 
#mainNav li ul { 
    display: none; 
} 
#mainNav a:hover { 
    background-color: #66FF66; 
} 
#mainNav li:hover ul { 
    display: block; 
    position: absolute; 
} 
#mainNav li:hover li { 
    float: left; 
    width: 80px; 
    background-color: #BBFFFF; 
    margin: 0; 
    padding: 0; 
}

Mon HTML est

<div> 
    <ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a></li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

Source

2013-02-16 MorganJ

plutôt que 'display: block' faites-le' display: inline-block' – asifsid88

Lors de la publication d'un code, il est utile de supprimer toutes les informations dont nous n'avons pas besoin. – sheriffderek

Vous pouvez utiliser une marge gauche négative pour le tirer en arrière en ligne. Ajoutez-le à:

#mainNav li:hover ul {}

Ou vous pouvez définir le remplissage: 0; sur le même élément.

De plus, il vous manque une fermeture « " » dans:

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>

Source

2013-02-16 19:13:15 Phil

Copier coller et essayer ce quelque chose de cet exemple vous aidera

<html> 
<head> 
<style type="text/css"> 
#mainNav{ 
    /* Your mainNav decoration here */ 

} 
#mainNav li{ 
    list-style:none; 
    display:inline-block; 
    background-color:#0FF; 
    padding:10px; 
    border:1px solid #000; 
} 

#mainNav ul{ 
    position:absolute; 
    display:none; 
    padding:0px; 
    top:50px; 
} 

#mainNav li:hover ul{ 
    display:inline-block; 
} 
</style> 
</head> 
<body> 

<ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a> 
    <br /> 
     <ul> 
     <li><a href="onePageOne.html" name="onePageOneLin">Sub Page One</a></li> 
     </ul> 
    </li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
    <br /> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLin">Sub Page One</a></li> 
     </ul> 

    </li> 
    </ul> 

</body> 
</html>

Source

2013-02-16 19:40:05 harsh8888

Il y a beaucoup de css.. là-dedans qui n'est pas assez spécifique et certaines choses qui sont juste au mauvais endroit

J'ai écrit un jsfiddle pour vous ici: A DISTILED VERSION OF YOUR CODE

Vous avez le style de liste sur li au lieu de ul où il appartient. Vous n'êtes pas assez précis sur les sous-listes et ainsi de suite. En utilisant> comme,

.main-nav > li > a { } dira cible la première couche de li seulement, et en ce que la seule a dans ce li etc.

Je donne des cours de la ul etc. Voir le violon pour ce que je pense est l'approche la plus simple. Pour les autres personnes, faites-moi savoir si mon violon pourrait être plus concis.

Source

2013-02-16 20:02:41 sheriffderek

Aussi, pour l'accessibilité, je pense qu'une meilleure approche serait d'utiliser une hauteur de 0 ou quelque chose au lieu de display: none; - Cela permettrait aux lecteurs d'écran pour les aveugles, etc, de lire le texte même s'il n'est pas vu visuellement. Vous pouvez réellement animer les changements de hauteur aussi. – sheriffderek

Voici un autre violon que j'ai fourchonné, montrez donc le menu déroulant avec la transition de hauteur 0 au lieu d'afficher aucun. http://jsfiddle.net/sheriffderek/SvUcL/ – sheriffderek

Les éléments du sous-menu ne sont pas alignés avec l'élément parent

Répondre

Questions connexes