Accordion menu wordpress

[patlat]

I wish to create an accordeon menu in wordpress. For the moment, I created my menu and I'm displaying my children pages, but I can't seem to display them when I'm doing a hover. Here's my CSS code :\[code\] /***Menu***/#header #access{position:relative;z-index:2;width:1225px;min-width:1225px;float:center;margin-left:auto !important;margin-right:auto !important;top:274px;text-align:center;}#header .menu ul { width:1185px; height:40px;color:black;text-align:center;margin-right:auto !important;list-style:none;}#header .menu li { display:block;float:left; width:206px; height:40px; font-size:17.5px; text-decoration:none;background-color:#c4d8ff; color:black; margin-right:31px;}#header .menu li a { display:block; width:206px; height:40px; text-decoration:none;color:black; font:17px segoe; vertical-align:center; line-height:40px;}#header .menu li a:hover { background-color:#e27c23;color:white; margin-right:31px;}#header .menu li.current_page_item a { background-color:#3670b5; color:white; width:206px; height:40px; margin-right:31px;}/***Sous-menu***/ul.sub-menu{background-color:red;margin-left:-20px;list-style:none;}ul.sub-menu li {background-color:blue !important;margin-left:-40px; clear:left;list-style:none;}ul.sub-menu li a { }ul.sub-menu li a:hover {background-color:black !important;}ul.sub-menu li.current_page_item a {background-color:green !important; }\[/code\]Can someone tell me wich css property I have to use to do that ? and where ? Thanks a lot !