中心div在绝对div内

Pre*_*ton 4 html css

看到此链接...:为例

在这个网站上我有这个代码

    <body>
    <div id="geral">
        <div id="animacao">
            <ul id="banners"> 
                <li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
                <li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
            </ul>
        </div>
        <div id="menu">

        </div>              
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

#geral 位于屏幕的中心 -

#animacao具有相同的大小#geral,在此具有淡入淡出效果的动画图像..

#menu有271px,需要保持在中心,#geral#animacao在此我将把菜单与PNG bakcground ....

这是我的CSS,可能不起作用......

#geral{
    position: absolute;
    width:990px;
    height:530px;
    top:50%;
    left:50%;
    margin-top:-265px;
    margin-left:-495px;
    background: url(../imagens/fundo.jpg) no-repeat;
}

#animacao{
    position: relative;
    width:990px;
    height:530px;
}

#menu
{
    position: absolute;
    left: 50%;
    width:271px;
    height:530px;
    margin-left:-135px;
    background-color:yellow;
    z-index: 10;
}
Run Code Online (Sandbox Code Playgroud)

我哪里错了?

演示

Bre*_*ody 5

这是你想要做的吗?http://jsfiddle.net/brettdewoody/C4jSS/

或者您是否希望#menu div位于#animacao之上?

HTML

<div id="geral">
    <div id="animacao">
        <div id="menu">

        <div>
    </div>       
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

#geral{
    position: absolute;
    width:990px;
    height:530px;
    top:50%;
    left:50%;
    margin-top:-265px;
    margin-left:-495px;
    background-color: black;
}

#animacao{
    position: relative;
    width:990px;
    height:530px;
    background-color: red;
}

#menu{
    position: relative;
    margin:0 auto;
    width:271px;
    height:530px;
    background-color:yellow;
    z-index: 10;
}
Run Code Online (Sandbox Code Playgroud)