RobinBolscher on "normal navigation menu to WP nav menu"

Dear WP'ers,

I am working for someone to move his existing website to the wordpress platform, by making a custom theme of his original website. Now I'd like to make a custom menu of the current navigation so that we can easily add new navigation items through the backend of wordpress.

This works, but not completely. I'd like to use the old style and animation of the menu. It uses ddsmoothmenu (ddsmoothmenu website). It works fine on hardcoded pieces of menu, but when using wp_nav_menu(); to generate the code that goes in to the div of ddsmoothmenu (div id and class), it goes wrong.. The dropdown menu wont drop down anymore on hover over.

I've been stuck here for a couple of days so far, and you are my last hope..
A little help is very much appreciated.

Below the relevant pieces of code.

the 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;
}

Thanks in advance!