web-dev-qa-db-fra.com

CSS ignorer le débordement: masqué

Je travaille sur la navigation pour ce site Web et j'ai des problèmes avec la navigation par liste déroulante.

Fondamentalement, j'ai overflow: hidden appliqué au conteneur qui contient les éléments de navigation afin que l'effet de survol fonctionne correctement (le bas de l'élément de navigation est "masqué"; vous verrez ce que je veux dire si vous survolez la navigation sur le site Web.

Pour Products, il existe un menu déroulant. En tant que site intégré dans Business Catalyst (CMS), je n’ai pas le contrôle sur l’imbrication des éléments de navigation, mais je peux évidemment les styler/les cibler avec JQuery.

Existe-t-il un moyen de faire en sorte que le conteneur déroulant dans div#navigation ignore la règle overflow: hidden que j'ai appliquée? J'ai essayé de régler position sur absolute et de jouer avec le z-index, mais sans succès.

Toutes les suggestions pour atteindre le même résultat sont également les bienvenues.

cssdrop-down-menu
21
Marty

overflow: hidden ne peut pas être remplacé par des éléments descendants - ils seront toujours coupés par l'élément avec overflow: hidden.

19
alex

Solution: Supprimez la règle position:relative; de la boîte avec overflow:hidden; et définissez-la sur l'une de ses boîtes parent. Alors les cases absolues dans la case avec overflow:hidden; ignoreront cette règle . Demo: http://jsfiddle.net/88fYK/5/

48
Serg Hospodarets

Définir la position de l’élément: fixed enlèvera l’élément et ses enfants du flux de documents normal, permettant ainsi son extraction. Mais vous devrez le repositionner manuellement par rapport à la fenêtre du navigateur. Ce n'est pas une bonne solution, mais c'est une solution de contournement.

5
puppybits

si votre conteneur est défini sur "overflow: hidden;" et votre menu déroulant est sous ce conteneur, il vous suffit de définir "position: absolute;"

.container {
  overflow: hidden;
}

.your_dropdown_menu {
  position: absolute;
}
2
Haimei

essayez de mettre position: fixé sur le contenu déroulant.

.dropdown-content{
   position:fixed
}
0
Shadow