CSS ignore overflow: hidden
je travaille sur la navigation pour ce site web et j'ai des problèmes avec le dropdown nav.
en gros, j'ai overflow: hidden appliqué au conteneur qui contient les éléments de navigation pour que l'effet de basculement fonctionne correctement (le bas de l'élément nav est "masqué" off); vous verrez ce que je veux dire si vous roulez sur le nav sur le site.
Produits il y a un dropdown nav. Comme le site dans Construit en affaires Catalyst( CMS), je n'ai pas le contrôle sur la façon dont les éléments de navigation sont imbriqués, mais je peux évidemment les styliser / les cibler avec JQuery.
Est-il possible de faire la liste déroulante contenant à l'intérieur de div#navigation ignorer overflow: hidden règle que j'ai appliqué? J'ai essayé la configuration de positionabsolute et en jouant avec les z-index, mais pas de chance.
4 réponses
overflow: hidden ne peuvent pas être supplantés par des éléments descendants - ils seront toujours clippés par l'élément avec overflow: hidden.
la Solution:
Supprimer position:relative; règle de la boîte avec overflow:hidden; et mettez-le dans une de ses boîtes. Puis les boîtes absolues dans la boîte avec overflow:hidden; ignorera cette règle.
Démo: http://jsfiddle.net/88fYK/5/
définir la position de l'élément: fixe supprimera l'élément et ses enfants du flux normal de documents, ce qui permettra de le découpler. Mais vous devrez le repositionner manuellement par rapport à la fenêtre du navigateur. Pas une bonne solution mais c'est un travail autour de.
si votre conteneur est défini à "overflow: hidden;" et votre menu déroulant est sous ce conteneur, vous avez juste besoin de définir " position: absolute;"
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}