need help trying to implement css sliding door tab nav in wordpress 3.0 Menu

Hello,
I’m trying to do css sliding door style tab navigation with drop-down menus. I got them to work pretty well in html and css but I’m running into trouble with implement this as a wordpress 3.0 menu. The sliding door technique requires use of a <span> within the tags. I was able to insert those using <?php wp_nav_menu( array( ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’,’theme_location’ => ‘primary’ ) ); ?>

Here’s my css for the tabbed navigation with drop-downs:
/* NAVIGATION */
#nav {
width: 653px;
height:57px;
margin: 0;
padding: 0;
z-index: 20;
}

#nav ul {
height: 34px;
list-style: none;
margin: 0;
padding: 0;
position: absolute; right: 0px;
}

#nav ul li {
float: left;
margin: 0 4px 0 0;
display: block;
position: relative;
}

#nav ul a {
background: #f1cdb0 url(images/tab.png);
font-family: Verdana, Geneva,”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-size: 12px;
font-weight: bold;
color: #e48723;
display: block;
float: left;
height: 34px;
padding-left: 12px;
text-decoration: none;
}

#nav ul a:hover {
color: #e48723;
font-weight: bold;
background-position: 0 -34px;
}

#nav ul a:hover span {
background-position: 100% -34px;
}

#nav ul li.current a {
background-color: #f1cdb0;
background-position: 0 -34px;
color: #e48723;
font-weight: bold;
}

#nav ul li.current span {
background-position: 100% -34px;
color: #e48723;
}

#nav ul span {
background: url(images/tab.png) 100% 0;
display: block;
height: 34px;
padding-right: 12px;
color: #e48723;
}

#nav ul ul{
background:#f6e9e3; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page’s background as possible (i.e. white page == white background). */
background:rgba(246,233,227,0); /* But! Let’s make the background fully transparent where we can, we don’t actually want to see it if we can help it… */
list-style:none;
position: absolute;
left:-9999px;
border-left: solid 1px #9fbbcb;
border-right: solid 1px #9fbbcb;
margin:0;
padding:0;
z-index: 21;
}
#nav ul ul li{
padding:0;
margin: 0;
height:auto;
float:none;
position: relative;

}
#nav ul ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
font-size: 12px;
}
#nav ul li:hover ul{ /* Display the dropdown on hover */
left:4px; /* Bring back on-screen when needed */
top:36px;
color: #e48723;

}
#nav ul li:hover ul a{ /* These create persistent hover states, meaning the top-most link stays ‘hovered’ even when your cursor has moved down the list. */
background:#f0f1f0 url(images/dd-bg.gif);
width: 100%;
font-size:11px;
color: #8ca9b9;
text-decoration:none;
border-bottom: solid 1px #9fbbcb;
margin:0;
padding: 0 7px;
}

#nav ul li:hover ul a span{
background: none;
}

#nav ul li:hover ul li a:hover{ /* Here we define–what happens when you hover each individual link. */
background:#fff;
color: #e48723;
}

This all works fine. The trouble comes with my drop-downs for the tabs that have child pages. The span is getting inserted into those unordered lists as well and I don’t want them there because it is adding the background image that goes with the tabs. How do I add spans or styling to the tabs but not the drop-downs or vice-versa? Am I trying to ask to much of the WordPress 3.0 Menu feature?

I tried this to get rid of the background on the span for the dropdowns:
#nav ul li:hover ul a span{
background: none;
}

This didn’t work.

Here’s what the tabs look like as I’ve implemented them on my custom WordPress theme: http://www.mindfulnutritioncoaching.com/test/
There is a flicker on mouseover that wasn’t there when I initially built these out (before adding to the wordpress menu). Also the first two tabs don’t act as links anymore and mousing over them causes the drop-downs that belong with other tabs to appear. That must also be caused by the span that is supposed to be only in the tabs but gets added to dropdowns. Does anyone have any ideas for making these tabs work in the WordPress menu feature? Thanks!