How to display a div as overlay which is hovered by a div which is inside another div?

Tags: html,css,css3

Problem :

How to display a div as overlay which is hovered by a div which is inside another div. This is the sample code which I tried to display the div as overlay box

CSS

   /*This is container Div */
    #one{
    position:absolute;
    background-color:#999;
    width:200px;
    height:200px;
    z-index:1;
    }

    /*This is Hovering Div which is inside container Div:*/
    #oneone
    {
    position:absolute;
    background-color:#fff;
    width:50px;
    height:50px;
    left:100px;
    top:90px;
    z-index:5;
    }

    /*This is the Overlay Div*/
    #two{
    position:absolute;
    background-color:#000;
    width:200px;
    height:200px;
    left:200px;
    top:290px;
    z-index:20;
    display:none;
    }

    /*This is the Div displays after Hovering*/
    #oneone:hover #two{
    display:block;
    }

HTML

    <div id="one">
    <div id="oneone"></div>
    </div>

    <div id="two">
    </div>

Pls help.. thanks in advance.

The Jfiddle : http://jsfiddle.net/stylerkishore/DySxJ/

---

Solution :

i created a jsfiddle for you

i modified a bit the html, so that #oneone and #two to be at least siblings in the same container

<div id="one">
    <div id="oneone"></div>
    <div id="two"></div>    
</div>

also i changed the css selector

#oneone:hover + #two {
    display:block;
}