débordement visible: masqué par le parent (position: relative)

Question

.product { 
    position:relative; 
    width:300px; 
    height:200px; 
    overflow:visible; 
} 

.menu { 
    position:absolute; 
    width:200px; 
    height:400px; 
} 

<div class="product"> 
    <div class="menu></div> 
</div> 

Le menu est caché par son produit parent. Le dépassement de produit est visible. Comment rendre le menu entièrement visible? La position du produit est relative, qui ne peut pas être modifiée.

Le menu est masqué et il deviendra visible au passage de la souris.

EDIT ---------

Le code ci-dessus fonctionne. Le menu n'est pas entièrement visible car il est découpé par le produit suivant. Définissez donc z-index sur 1000. Toutefois,

.product { 
     position:relative; 
     width:300px; 
     height:200px; 
     overflow-x:hidden; 
     overflow-y:visible; 
    } 

ne fonctionne pas. Il y a un défilement vertical, identique à overflow-y: auto. Pourquoi?

Answer 1

Vous pouvez ajouter des marges ou des marges si elles se trouvent juste en dessous. Cependant, il est difficile de voir ce que ça fait, alors peut-être que vous ferez du violon.

.product { 
position:relative; 
width:300px; 
height:200px; 
padding: 10px; 
overflow:visible; 
} 

.menu { 
position:absolute; 
width:200px; 
height:400px; 
padding: 10px; 
}