custom stylisation d'un sous menu

bonjour,

J'ai créé un menu et sous-menu sur un custom thème en html. Mon soucis est le suivant je ne sais pas comment re-créer le même menu et sous-menu dans wordpress.
J'ai intégré le menu principale dans wordpress mais le sous-menu c'est une autre histoire.
Le sous-menu ou plutôt l'animation est géré par Jquery.
le code du menu et sous-menu :

<nav>
                <ul id="menu">
                    <li class="item-150"><a rel="150" rel="actualites" href="actualites.html">Actualitées</a></li>
                    <li><a href="#" rel="100">Convocations</a></li>
                    <li><a href="#" rel="110">Le Club</a></li>
                    <li><a href="#" rel="120">Infos utiles</a></li>
                    <li class="item-160"><a rel="160" href="boutiqueEDA/index.php">Boutique</a></li>
                    <li><a href="#" rel="130">Liens</a></li>
                </ul>
          <div id="sub-100" class="sub-menu-items" style="display:none;">
            <a class="close-sub-menu" href="#"></a>
            <div class="sub-menu-container">
              <a class="sub-elements" href="domicile.html" rel="domicile">Domicile</a>
              <a class="sub-elements" href="exterieur.html" rel="exterieur">Extérieur</a>
            </div>
          </div>
          <div id="sub-110" class="sub-menu-items" style="display:none;">
            <a class="close-sub-menu" href="#"></a>
            <div class="sub-menu-container">
                <a class="sub-elements" href="#">Réglement</a></li>
                <a class="sub-elements" href="#">Organigramme</a></li>
                <a class="sub-elements" href="#">Historique</a></li>
                <a class="sub-elements" href="#">Arbitrage</a></li>
                <a class="sub-elements" href="#">Partenaires</a>
            </div>
          </div>
          <div id="sub-120" class="sub-menu-items" style="display:none;">
            <a class="close-sub-menu" href="#"></a>
            <div class="sub-menu-container">
                <a class="sub-elements" href="#">Localisation des salles</a></li>
                <a class="sub-elements" href="#">Horaires des entraînements</a></li>
                <a class="sub-elements" href="#">Nos entraineurs</a></li>
            </div>
          </div>
          <div id="sub-130" class="sub-menu-items" style="display:none;">
            <a class="close-sub-menu" href="#"></a>
            <div class="sub-menu-container">
                <a class="sub-elements" href="http://www.ff-handball.org/">FFHB</a></li>
                <a class="sub-elements" href="http://www.lbhb.com/spip/">LBHB</a></li>
                <a class="sub-elements" href="http://www.handball29.fr/">COMITE-29</a></li>
            </div>
          </div>
            </nav>

Le style css menu et sous-menu:

/*-------- MENU ---------*/
#menu{height: 50px;background-color: none;}
#menu li{display: inline-block;margin-left: 20px;padding-left: 10px;}
#menu li a{text-decoration: none;font-family: 'zeroneroblack';font-size: 17px;color:#2887bd;line-height: 50px;padding: 14px 20px 14px 20px;}
#menu li a:hover{color: #fff;background: rgba(0,0,0,0.5);}
#menu li a.active{color: #fff;background: rgba(0,0,0,0.5);}
/*-------- SUB-MENU ---------*/
.sub-menu-items{width: 940px;background: rgba(0,0,0,0.5);padding: 10px;position: relative;}
.close-sub-menu{background: url(images/close.png)no-repeat;width: 20px;height: 20px;position: absolute;margin-left: 920px;cursor: pointer;}
.sub-menu-container{overflow: hidden;width: 600px;min-height: 100px;}
.sub-menu-container a{text-decoration: none;color: #fff;font-family: 'Myriad Pro',sans-sérif;font-size: 20px;border-bottom: 1px solid #fff;margin-left: 40px;}
.sub-elements{float: left;width: 250px;margin-top: 10px;padding: 5px;}
.sub-elements:hover{color: #fff;background: #2887bd;}

et le code Jquery qui gére l'animation :

$(document).ready(function(){
    jQuery("#menu li a").click(function(){
        jQuery(".sub-menu-items").slideUp();
        jQuery("#sub-"+jQuery(this).attr("rel")).slideDown();
        jQuery("#menu li a").removeClass("active");
        jQuery(this).addClass("active");

    });
    jQuery("a.close-sub-menu").click(function(){
        jQuery(".sub-menu-items").slideUp();
        jQuery("#menu li a").removeClass("active");
    });

merci