Member Avatar for 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/

Edited by creativeideas
  • 2 Contributors
  • 7 Replies
  • 776 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by creativeideas
Member Avatar for LastMitch

@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.

Member Avatar for creativeideas

found no place where i forgot to put semi-colon

Member Avatar for LastMitch

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.

Edited by LastMitch because: grammer
Member Avatar for 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

Member Avatar for LastMitch

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!

Member Avatar for creativeideas

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

Edited by creativeideas
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.