2009-09-16 2 views
0

Voir ici: http://174.132.101.73/~ree/header/Annoying Problème de CSS Harmoniser Drop Down

J'ai une liste déroulante. J'essaie d'obtenir le texte "Lien 1", "Lien 2" et "Lien 3" pour aligner à gauche sous le lien de produits lorsque vous passez la souris dessus. Mais je ne peux pas obtenir cela pour travailler pour la vie de moi. Je suis sûr que c'est quelque chose de simple. Vous trouverez le code CSS en question au bas du fichier CSS. Voici l'extrait où je pense que le problème se produit.

/* General */ 
#cssdropdown, #cssdropdown ul { list-style: none; } 
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; } 

/* Head links */ 
#cssdropdown li.headlink { width:60px; float: left; text-align: center; } 

/* Child lists and links */ 
#cssdropdown li.headlink ul { display: none; border: 1px black solid; text-align: left; } 
#cssdropdown li.headlink:hover ul { display: block; } 
#cssdropdown li.headlink ul li a { padding: 5px; height: 5px; } 
#cssdropdown li.headlink ul li a:hover { background-color: #333; } 

Je tente aussi d'obtenir la boîte elle-même autour des liens (« Link 1 », « Link 2 » et « Link 3 ») pour être sous le lien de produits et non légèrement vers la droite comme il est maintenant.

Toute aide appréciée car cela me rend fou!

Merci à tous

+0

pourrait vous envoyer aussi pertinents HTML un peu difficile à savoir sans le voir. –

+0

J'ai ajouté une URL à une petite démo. J'espère que ça m'aide! :) – Abs

Répondre

1

Changer

#header UL {margin: 0 0 0 30px} 

à

#header > UL {margin: 0 0 0 30px} 

Le problème est que vous ajoutez une marge gauche de 30px à tous ULs intérieur #header alors que vous avez besoin probablement seulement pour les enfants immédiats. Peut-être la même chose avec #header LI.

+0

Je n'ai jamais vu ça avant, qu'est-ce que c'est? Aussi, il semblait l'avoir réparé partiellement, le texte "Link 1", "Link 2" et "Link 3" n'est pas vraiment aligné avec le mot produits. Je devrais le dire avant. Dois-je utiliser une marge-gauche avec un px moins? – Abs

+0

Voir ma modification à propos de '#header LI'. Vous avez donné de grandes marges à tout LI dans #header. –

0

changement

#header ul { 
float:left; 
left:auto; 
margin:0 0 0 10px; 
padding:0; 
z-index:99; 
} 

à

#header ul { 
float:left; 
left:auto; 
margin:0; 
padding:0; 
z-index:99; 
} 

La marge salit vers le haut.

+0

Cela a semblé le réparer aussi, mais comme je l'ai dit à Chetan Sastry, il ne le corrige que partiellement car je voudrais vraiment qu'il soit aligné avec le mot Produits. – Abs

0

Pour aligner les mots produits

Essayez d'ajouter le style suivant:

li.headlink ul li 
{ 
    margin-left:0px !important; 
} 
0

Utilisez-vous Firefox à tous? Il y a une barre d'outils de plugin très utile appelée Web Developer qui aidera à résoudre les problèmes de CSS (et beaucoup d'autres).

On dirait qu'il ya un total de 30px de marge gauche ajouté au lien 1 - éléments Link 3 LI dans ces règles:

#cssdropdown li.headlink { 
    width: 60px; 
    float: left; 
    margin-top: 30px; 
    margin-right: 15px; 
    margin-bottom: 0px; 
    margin-left: 15px; 
} 

et

#header li { 
    list-style-image: none; 
    display: inline; 
    float: left; 
    margin-top: 30px; 
    margin-right: 15px; 
    margin-bottom: 0pt; 
    margin-left: 15px; 
}