dropdown menu CSS help!

[somvannda]

#Menu {
    clear:left;
    height:48px;
    margin:0 15px;
    border-bottom:1px solid #c0c0c0;
    z-index:3;
}
    #Menu ul {
        list-style:none;
    }
        #Menu ul li {
            float:left;
            position:relative;
        }
        #Menu ul li a {
            display:block;
            height:48px;
            text-indent:-999em;
        }
            #Menu ul li a#MenuHome {
                width:66px;
                margin-left:12px;
                margin-right:80px;
                background:url("../images/menu_home.png") no-repeat scroll 0 0 transparent;
            }
            #Menu ul li a#MenuWhoWeAre {
                width:117px;
                margin-right:79px;
                background:url("../images/menu_who_we_are.png") no-repeat scroll 0 0 transparent;
            }
            #Menu ul li a#MenuWhatWeDo {
                width:118px;
                margin-right:79px;
                background:url("../images/menu_what_we_do.png") no-repeat scroll 0 0 transparent;
            }
            #Menu ul li a#MenuGetInvolved {
                width:126px;
                margin-right:82px;
                background:url("../images/menu_get_involved.png") no-repeat scroll 0 0 transparent;
            }
            #Menu ul li a#MenuNews {
                width:64px;
                margin-right:80px;
                background:url("../images/menu_news.png") no-repeat scroll 0 0 transparent;
            }
            #Menu ul li a#MenuDonate {
                width:81px;
                background:url("../images/menu_donate.png") no-repeat scroll 0 0 transparent;
            }
                #Menu ul li a:hover {
                    background-position:0 -48px !important;
                }
            /* Highlist current page */
            body#Home #Menu ul li a#MenuHome,
            body#WhoWeAre #Menu ul li a#MenuWhoWeAre,
            body#WhatWeDo #Menu ul li a#MenuWhatWeDo,
            body#GetInvolved #Menu ul li a#MenuGetInvolved,
            body#News #Menu ul li a#MenuNews,
            body#Donate #Menu ul li a#MenuDonate {
                background-position:0 -48px !important;
            }
    #Menu .subMenu {
        position:absolute;
        display:none;
        top:0;
        left:-7px;
        width:270px;
        height:284px;
        background:url("../images/dropdown_who_we_are.png") no-repeat scroll 0 0 transparent;
        z-index:21;
    }
        #Menu .subMenu.whatWeDo {
            background:url("../images/dropdown_what_we_do.png") no-repeat scroll 0 0 transparent;
        }
        #Menu .subMenu.getInvolved {
            background:url("../images/dropdown_get_involved.png") no-repeat scroll 0 0 transparent;
        }

   <div id="Menu">
                <ul>
                    <li><a id="MenuHome" href="index.php">Home</a></li>
                    <li><a id="MenuWhoWeAre"  href="who-we-are.php">Who we are</a></li>
                   	 <li><a id="MenuWhoWeAre" class="subMenu" href="sdfdafda">dsafdsa</a></li>
                    <li><a id="MenuWhatWeDo" class="menuParent" href="what-we-do.php">What we do</a></li>
                    <li><a id="MenuGetInvolved" class="menuParent" href="get-involved.php">Get involved</a></li>
                    <li><a id="MenuNews" href="news.php">News</a></li>
                    <li><a id="MenuDonate" href="donate.php">Donate</a></li>
                </ul>
            </div>

Can you help me with this css? I want to have submenu just like on this page http://www.transparency.org, but I tried to add submenu and it doesn't work.