Parent container hide dropdown menu

Question

Its pretty hard to recreate this in jsfiddle, so I'm going to go and insert a screenshot, HTML and CSS:

I am having a problem displaying a dropdown in the image above.

HTML and CSS:

<div class="row-fluid profile-gallery-image-container"> <div class="span12"> <a href="#"><img src="#"/></a> <div class="image-options"> <div class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog icon-white"></i></a> <ul class="dropdown-menu"> <li><a href="javascript:void(0);">test</a></li> </ul> </div> </div> <div class="delete-image"> <a href="javascript:void(0);"/></a> </div> </div> </div> .profile-gallery-image-container { max-width: 130px; max-height: 110px; margin-bottom: 0px; display: inline-block; position: relative; border: 2px solid rgba(140,140,140,1); z-index: 0; } .image-options { float: right; top: 0px; right: 0px; position: absolute; padding-top: 2px; border-left: 2px solid rgba(255,128,64,1); border-bottom: 2px solid rgba(255,128,64,1); width: 15px; height: 15px; } 

What am I doing wrong?

Answer 1

This may be due to z-index levels or it may be overflow.

Setting the parent container for overflow: visible; it would be the beginning - but then I would look at the position: relative to the CSS menu - this often helps.

But ultimately, not seeing the working demo, I can’t figure it out.