Menu horizontal déroulant

Bonjour !

Voilà j'ai un problème avec le tuto de menu déroulant en CSS/Html ... J'ai codé mon menu comme sur la vidéo mais lorsque je mets un div après mon div "container_menu" les sous rubrique sont cacher ... De plus je n'arrive pas à mettre en place une police pour les balise <dt> ... Pouvez vous me dire où j'ai fais une faute ? Merci d'avance à tous ! Pour info, le div d'après est une image en background....

Voici mon code html :

<div id="container_menu">   

            <div id="menu_upper">

                    <dl>

                        <a href="#"><dt>Hommes</dt></a>

                        <dd>

                            <ul>

                                <li><a href="#">tee-shirts</a></li>
                                <li><a href="#">sweats</a></li>
                                <li><a href="#">pantalons</a></li>
                                <li><a href="#">chaussures</a></li>

                            </ul>

                        </dd>

                    </dl>
                    <dl>

                        <a href="#"><dt>Femmes</dt></a>

                        <dd>

                            <ul>

                                <li><a href="#">tee-shirts</a></li>
                                <li><a href="#">sweats</a></li>
                                <li><a href="#">pantalons</a></li>
                                <li><a href="#">chaussures</a></li>

                            </ul>

                        </dd>

                    </dl>
                    <dl>

                        <a href="#"><dt>Enfants</dt></a>

                        <dd>

                            <ul>

                                <li><a href="#">tee-shirts</a></li>
                                <li><a href="#">sweats</a></li>
                                <li><a href="#">pantalons</a></li>
                                <li><a href="#">chaussures</a></li>

                            </ul>

                        </dd>

                    </dl>
                    <dl>

                        <a href="#"><dt>Accessoires</dt></a>

                        <dd>

                            <ul>

                                <li><a href="#">Colliers</a></li>
                                <li><a href="#">Bracelets</a></li>
                                <li><a href="#">Casquettes</a></li>
                                <li><a href="#">Bandanas</a></li>

                            </ul>

                        </dd>

                    </dl>
                    <dl>

                        <a href="#"><dt>Soldes</dt></a>

                        <dd>

                            <ul>

                                <li><a href="#">-10%</a></li>
                                <li><a href="#">-20%</a></li>
                                <li><a href="#">-25%</a></li>
                                <li><a href="#">-50%</a></li>

                            </ul>

                        </dd>

                    </dl>

            </div>

        </div>

et mon code css :

#container_menu
{
    width:1000px;
    height:30px;

    position: relative;

    background-image: url(images/background/background_menu.png);
    background-repeat:no-repeat;

    color: #ffffff;

}

#menu_upper
{
    position:absolute;

}
dl
{
    height:30px;
    width:200px;
    margin:0;
    padding:0;
    display:block;
    float:left;

    font-style:candara;

}
dt
{
    display:block;
    height:30px;
    width:200px;
    color:#ffffff;
    line-height:30px;
    text-align:center;
    font-style:candara;
}
dd
{
    display:block;
    margin:0px;
    padding:0px;
    background-color:#a7a6a6;
}
dd ul
{
    margin:0px;
    padding:0px;
    text-align:center;
    list-style:none;

}
dd ul li
{
    display:block;
    margin:0px;
    padding:0px;
}
dd ul li a
{
    color:#ffffff;
    display:block;
    text-decoration:non;
    height:30px;
    line-height:30px;
    border-top:dotted 1px #ffffff;
    font-family: Candara;

}
dd ul li a:hover
{
    background-image: url(images/background/background_menu_select.png);
    background-repeat:no-repeat;
    color: #000000;

    background-position:center;

    font-family: Candara;
}
dl dd
{
    display:none;
}

dl:hover dd
{
    display:block;
}
dt:hover
{
    background-image: url(images/background/background_menu_select.png);
    background-repeat:no-repeat;
    color: #000000;

    background-position:center;

    font-family: Candara;
}