Css实现下拉菜单效果

<div id="container" style="position:relative;">
    <a href="#">主菜单
    </a>
    <div id="menu" style="position:absolute;z-index:10;top:100px;">
        <a  href="#">下拉子菜单</a>
        <a  href="#">下拉子菜单</a>
        <a  href="#">下拉子菜单</a>
        <a  href="#">下拉子菜单</a>
    </div>
</div>    

#menu{
    display:none;
}

#container:hover #menu {
    display:block;
}