How can I achieve this Idea?

How can I achieve this Idea?

Hello jQuery Community, I am eagerly interested in jQuery and so i started my first project. Since I am also to CSS very new I have some problems in the whole thing.
(Sorry for my bad english >__<)

Look at the pic in the attachments. The description is in german cause i wanted to ask in the german community but i cant get registrated so i try it here. My Idea is when the mouse hovers into the black box the green "options" box (which is "behind" the orange "Main" box) moves to the left so the user can see it.

i did it with div's so the black one is <div class="Complete"> , the green one is <div Class="Options"> and the orange one <dic Class="Main">.
so it is

<div Class="Complete">
<div Class="Main">
Some Text here
</div>
<div Class="options">
Some more text here
</div>
</div>

My problem here is to put both boxes to the same height (which needs CSS i think) and  into the right z-index. I alreade managed to create a function that makes the options-div moves to the left...

I hope anyone can help me, i think it is just one oder two methods i don't know to achieve this...
Greets,
Golden.Sun