user877559
user877559

Reputation:

Div takes place above the other div?

You can look here: http://jsfiddle.net/vsjwww/n7kk3/17/

It all works fine, but as you see, the div, which will slide down, starts slide above the other div.

It looks like a CSS problem, how can we solve it?

Thanks..

Upvotes: 0

Views: 76

Answers (2)

Andy
Andy

Reputation: 2214

Absolutely position the inner element at the bottom border of the outer element:

#has_hover_function, #will_slideDown
{
   position:relative;
   width:150px;  
   height:25px;
   font-family:Arial;
   text-align:center;
   padding-top:3px;
   border:1px solid gray;
   background-color:#e7e7e7;
}

#will_slideDown {
   position:absolute;
   top:29px; /* 1px + 3px + 25px; */
   left:0;
}

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78590

Demo

You need the dropdown div to have the following css:

#will_slideDown
{
    position:absolute;
    top:100%;
    left:0px;
}

and #has_hover_function needs position:relative;

Upvotes: 1

Related Questions