como adapto mi menu a uno desplegable

[mysterio069]

Hola a todos!

Vereis esque tengo un menu que quiero hacer desplegable, pero el desplegable tengo que adaptarlo al que tengo actualmente y no se como hacerlo, os dejo el css de los dos y si necesitais algun dato mas o la imagen del menu o algo decidmelo.

Si creeis que hay alguna forma mejor de hacer mi menu desplegable que no sea adaptandolo al que he encontrado, explicadmela por favor =)

Este es el css del menu que tengo actualmente

Código CSS:

/* Menu */
 
#menu {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    height: 50px;
    background: url(images/img02.jpg) no-repeat left top;
}
 
#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#menu li {
    display: inline;
}
 
#menu a {
    display: block;
    float: left;
    height: 32px;
    margin: 0;
    padding: 18px 20px 0 30px;
    text-decoration: none;
    text-transform: capitalize;
    background: url(images/img03.jpg) no-repeat right top;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FFFFFF;
}
 
#menu a:hover {
    color: #FFFFFF;
}
 
#menu .current_page_item a {
    color: #FFFFFF;
}
 

Y este del menu desplegable que encontre

Código CSS:

* {margin: 0px;
padding: 0px; outline: 0;
}
html, body {width: 100%;
}
body {background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul {list-style-type: none;
}
#menu ul li {width: 162px;
}
#menu ul li.nivel1 { float: left;
margin-right: 1px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color:#00bf2b;
border: solid 1px #0a4e03;
padding: 8px;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;
position: absolute;
left: 161px!important;left: 160px;
top:0px!important;top: -21px;
}
#menu ul li ul li a {width: 160px;
padding: 8px 0px;
border-top-color: transparent;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #fff;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
 

Gracias!