Position absolute and overflow hidden

[creativeideas]

We have two DIVs, one embedded in the other. the inner popupdiv which is positioned absolute, does not obey the overflow hidden of the outer DIV . hover on anylink will show a popup but it is not showing above red div it goes behind the main div what is the problem??

     <div style="float:left; height:200px; width:100%; background:red; overflow:hidden; position:relative">
     <div class="actionlist">
                <ul class="dott">
                <li>
                  <a href="#">Download</a>
                   <div class="popup_div">


               <em></em>
             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>

            </div>
           </li>
              <li><a href="#">Add to Basket</a>


               <div class="popup_div"><em></em>

             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>

              </div>

              </li>
                <li><a href="#">Share</a>

                <div class="popup_div"><em></em>

             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>

            </div>

                </li>
            </ul>
            </div><br />
  <br />
<div class="actionlist">
            <ul class="dott">
            <li>
              <a href="#">Download</a>
               <div class="popup_div">

               <em></em>
             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>
               </div>
                    </li>
              <li><a href="#">Add to Basket</a>

               <div class="popup_div" style="overflow:visible"><em></em>

             <ul>
             <li><a href="#">ddssdfsdffds</a></li>
              <li><a href="#">ddssdfsdffds</a></li>
               <li><a href="#">ddssdfsdffds</a></li>
                <li><a href="#">ddssdfsdffds</a></li>
                 <li><a href="#">ddssdfsdffds</a></li>

             </ul>
                     </div>

              </li>
                <li><a href="#">Share</a>

                <div class="popup_div"><em></em>
                            </div>

                </li>
            </ul>

    </div>
    </div>`

css:

.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }
.dott { list-style:none;}
.dott li{ height:20px; position:relative}
.dott li a { padding:2px 9px; color:#454545; font-size:11px; }
div.actionlist ul li:hover > div.popup_div { display:block; }
.popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }

fiddle link: http://jsfiddle.net/sharma_pooja/CmmYj/13/

@creativeideas

We have two DIVs, one embedded in the other. the inner popupdiv which is positioned absolute, does not obey the overflow hidden of the outer DIV . hover on anylink will show a popup but it is not showing above red div it goes behind the main div what is the problem??

I think you rush into this.

You forgot to put: semi-colon ; in your CSS code.

[creativeideas]

found no place where i forgot to put semi-colon

[creativeideas]

No one with a answer

No one with a answer

What do you mean? You have to understand I live in a different time zone. You can't expect me or anyone to be on Daniweb 24 hours a day.

I think you rush into this meaning you didn't bother double checking your CSS code before you post it here. The reason why is that there shouldn't be that much missing semi-colons.

found no place where i forgot to put semi-colon

You're missing semi-colon ;

On .actionlist you forgot to put a semi-colon on padding:8px 0;

.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }

same as .dott li you forgot to put a semi-colon on position:relative;

.dott li{ height:20px; position:relative}

same as .popup_div you forgot to put a semi-colon on display:none;

.popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }

Why do you have this > in here:

div.actionlist ul li:hover > div.popup_div { display:block; }

Maybe you can explain to me what is > because I never seen that before.

[creativeideas]

in last i forgot to put semicolon..u say that this is my mistake or i m in little hurry but it doesn't mean this css doesn't work.and > thing is called selectors and if want some knowledge about this read this http://www.w3.org/TR/CSS2/selector.html

in last i forgot to put semicolon..u say that this is my mistake or i m in little hurry but it doesn't mean this css doesn't work.and > thing is called selectors

Thank for the link. I think I learn something from it!

You're the one asking for help not me so instead downvote me you should ask what should I now and how can I fixed it!

[creativeideas]

ok i m asking now can u help me in fixing my problem ! So i give better comment and a upvote..