Question

I have this twitter bootstrap dropdown menu that is hidden inside a parent div like this:

Here is my css and html:

<div class="profile-gallery-image-container">
    <img src="#" />
      <div class="image-options">
        <div class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">test</a></li>
           </ul>
        </div>
    </div>
</div>

Css

.profile-gallery-image-container {
    max-width: 105px;
    max-height: 80px;
    margin-bottom: 0px;
    display: inline-block;
    border: 2px solid rgba(140,140,140,1);
    overflow: visible;
}

    .image-options { 
    float: right;
    display: inline;
    position: absolute;
    border: 2px solid rgba(255,128,64,1);
    width: 10px;
    height: 10px;
    top: 0px;
    right: 0px;
}

The z-index of the twitter-bootstrap dropdown menu is set to 1000 by default i tried fiddeling with it but it does not want to break out of the parent container. I also tried overflow: visible style but without success. How should I make it visible outside the box?

Answer 1

Hi now define your position:relative; to your .profile-gallery-image-container class

.profile-gallery-image-container {
position:relative;}

live demo

———

Updated Demo