2010-07-27 8 views
0

Hé les gars, merci d'avance pour toute aide ou contribution. J'ai du mal à comprendre les sélecteurs CSS et j'ai lu les docs ..Sélecteur CSS ne fonctionne pas?

J'essaie de me référer à l'UL avec le menu déroulant id dans ma feuille de style. J'étais sous l'hypothèse que j'ai pu se référer à des éléments tels que:

#dropdown ul 
{ 
} 

Cette méthode ne semble toutefois pas travailler: s .. Est-ce que je comprends mal sélecteurs CSS? Les éléments de mon code actuel sont imbriqués plus profondément que cette structure mais je présume que le principe est le même?

<div id="wrapper"> 

    <ul id="dropdown"> 
     <li class="sub"><a href="#">Dropdown</a> 

     <!-- Sub Menu --> 
     <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     </ul> 
     <!-- End Submenu --> 

    </li> 
    </ul> 

</div> 


/* Dropdown Menu */ 
#dropdown ul 
{ 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#dropdown ul li 
{ 
    display: block; 
    position: relative; 
    float: left; 
} 

#dropdown li ul 
{ 
    display: none; 
} 

#dropdown ul li a 
{ 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
} 

#dropdown ul li a:hover 
{ 
    background: #617F8A; 
} 

#dropdown li:hover ul 
{ 
    display: block; 
    position: absolute; 
} 

#dropdown li:hover li 
{ 
    float: none; 
    font-size: 11px; 
} 

#dropdown li:hover a 
{ 
    background: #617F8A; 
} 

#dropdown li:hover li a:hover 
{ 
    background: #95A9B1; 
} 
+0

Quel est le problème? Cela fonctionne parfaitement. Vous pouvez éventuellement partager votre feuille de style et dire quel attribut échoue. – Kangkan

+0

Ajout de la css qui génère la liste déroulante – Lee

+0

Kangkan, Lee veut sélectionner '# dropdown' mais sélectionne actuellement' ul # dropdown', ce qui est une sélection complètement différente. –

Répondre

4

Essayez

ul#dropdown 
{ 
} 

Cela permet de sélectionner l'élément ul avec menu déroulant ID.

Avec

#dropdown ul 

vous essayez de localiser un élément ul dans un élément avec menu déroulant id. Cela va sélectionner tous les éléments ul à l'intérieur du #dropdown ul, mais de nombreux niveaux profonds.

+0

Merci pour la réponse .. J'ai ajouté ce que vous avez suggéré à mon fichier CSS mais cela n'a pas fonctionné. J'ai modifié le post original pour montrer le CSS qui devrait styler la liste déroulante. – Lee

+0

Le CSS dans votre mise à jour ne correspond pas à ce que Mario a suggéré. – Chris

+0

La solution Marios fonctionne très bien pour l'élément ul. Cependant, la ligne suivante: li a { affichage: bloc; text-decoration: aucune; couleur: #ffffff; border-top: 1px solide #ffffff; Rembourrage: 5px 15px 5px 15px; arrière-plan: # 2C5463; marge gauche: 1px; white-space: nowrap; } à: ul # dropdown li a semble-t-il casser – Lee

1

edit: c'est vrai que mario a écrit.

edit2: je suis désolé d'être 5 secondes trop lent, je voulais juste aider. Pour completition de mon poste: ul#dropdown ou #dropdown est le bon choix

+0

Ne semble pas fonctionner: s – Lee

+0

Merci pour l'aide .. ul # dropdown fonctionne très bien pour l'élément UL mian .. Le problème semble exister en changeant les sélecteurs plus complexes .. – Lee

+0

Exam: li a - fonctionne ul # dropdown li a - ne fonctionne pas – Lee

0

#dropdown ul signifie « sélectionner une ul qui est un enfant direct ou indirect de #dropdown ». Ce n'est pas ce que tu veux, je pense. Essayez #dropdown seul (vous n'avez pas besoin de mentionner ul car les ID sont exclusifs, ce qui signifie que vous ne devriez en avoir qu'un #dropdown dans une page).