Bestaand menu naar WP menu

Beste WP’ers,

Ik ben bezig voor iemand om zijn bestaande website om te zetten naar een wordpress website. Nu wil ik graag de navigatie over zetten naar een custom menu in wordpress zodat we makkelijk nieuwe navigatie items kunnen toevoegen.

Dit lukt tot op zekere hoogte. Graag wil ik de oude opmaak en animatie behouden. Het maakt gebruik van ddsmoothmenu (ddsmoothmenu website) Het werkt prima op een gehardcoded stukje menu. Maar wanneer ik de wp_nav_menu(); functie gebruik en daar de div met id en class (van ddsmoothmenu) om heen plaats gaat het fout. De dropdown komt niet meer naar beneden bij een hover over.

Ik zit al een aantal dagen vast op dit probleem en zit dus een beetje met m’n handen in m’n haar.. Hulp wordt gewaardeerd!

Hier onder de relevante stukjes code:

de website

HTML:

<!-- START HEADER -->
        <div class="header head-pat6">
            <div class="container_12">
                <div class="grid_12">
                    <!-- START HEADING -->
                    <div class="heading">
                        <!-- START LOGO -->
                        <div class="logo">
                        </div>
                        <!-- END LOGO -->
                        <!-- START NAVIGATION -->

                    <div class="navigation">
                     <!--WORDPRESS INTEGRATED MENU BELOW-->
                      <div id="header">
                      		<h1></a><a>"><?php bloginfo('name'); ?></a></h1>
                      		<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>
                    </div>
                    <!--WORDPRESS INTEGRATED MENU BELOW-->
                    <div id="smoothmenu1" class="ddsmoothmenu">
                           <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'primary-menu' ) ); ?>
                    </div>
                    <!-- OLD MENU BELOW -->
                    <div id="smoothmenu1" class="ddsmoothmenu">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="">Products</a>
<ul>
<li><a href="">Washing & Drying</a></li>
<li><a href="">Waxes & Sealants</a></li>
<li><a href="">Optimum Coatings</a></li>
<li><a href="">Leather, Vinyl & Trim</a></li>
<li><a href="">Tires & Wheels</a></li>
<li><a href="">Polishes</a></li>
<li><a href="">Scratch Shield</a></li>
<li><a href="">FurRemover</a></li>
<li><a href="">Accessories</a></li>
</ul>
</li>
<li><a href="">Dealers</a></li>
<li><a href="">Media</a>
                            </li>
<li><a href="">Contact</a></li>
</ul>
                        <br style="clear: left" />
                    </div>
                    </div>
                    <!-- END NAVIGATION -->
                    </div>
                    <!-- END HEADING -->

CSS-style:

.nav ul{
    list-style:none;
}

.nav li{
    float:left;
    position:relative;
}

.nav a{
    display:block;
    text-decoration:none;
    color:#fff;
    padding:0 15px 10px 0;
    font-size:13px;
    font-weight:bold;
}

.nav ul ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    float:left;
    z-index:99999;
    background: #212121;
}

.nav ul ul ul{
    top: 30%;
    left:100%;
    background: #343434;
}

.nav ul ul a{
    height:auto;
    line-height:1em;
    padding:10px;
    width:130px;
}

.nav li:hover > a,.nav ul ul:hover > a{
    color:#ccc;
}

.nav ul li:hover > ul{
    display:block;
}

CSS-ddsmoothmenu:

.ddsmoothmenu{
    font: bold 14px Arial;

}

.ddsmoothmenu ul{
    z-index:100;
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: right;
}

/*Top level list items*/
.ddsmoothmenu ul li{
    position: relative;
    display: inline;
    float: left;
    z-index: 9999 !important;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
    display: block;
    color: white;
    padding: 8px 20px;
    padding-left: 0px;
    color: #2d2b2b;
    text-decoration: none;
    text-transform: uppercase;
}
.ddsmoothmenu ul li:last-child a{
    padding-right: 0px;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
    color: #FFFFFF;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: #FFFFFF;
}

.ddsmoothmenu ul li a:hover{
    color: #666666;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
    position: absolute;
    left: 0;
    display: none; /*collapse all sub menus to begin with*/
    visibility: hidden;
    background: #FFF;
    -moz-box-shadow: 0px 0px 10px #666;
    -webkit-box-shadow: 0px 0px 10px #666;
    box-shadow: 0px 0px 10px #666;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
    display: list-item;
    float: none;
    border-bottom: 1px solid #E9E9E9;
}
.ddsmoothmenu ul li ul li a {
    color: #9F9E9E !important;
}
.ddsmoothmenu ul li ul li a:hover {
    color: #6F6E6E !important;
}
.ddsmoothmenu ul li ul li:last-child {
    border-bottom: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
    top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
    font: normal 12px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 7px;
    margin: 0;
    border-top-width: 0;
    text-transform: none;
}
.ddsmoothmenu ul li ul li a:hover {
    color: #666;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
                 opacity: 0.8;
}

Alvast bedankt!