Background sur DL non appliqué sur DT ?

Bonjour,

Je fais un menu en utilisant les listes html (dl). J'utilise les dt et dd pour définir des menus et sous-menu qui sont affichés lorsqu'on passe sur un item de menu. Mon menu a aussi des bords arrondis. Je met une image à bord arrondis pour faire l'entête et le bas de mon menu que je place dans des dt, comme des items de mon menu (non cliquable biensûr). Les côtés du menu sont quantà eux construit en appliquant un background sur la dl.
Problème, vu que j'ai une image à fond transparent dans un dt, je vois derrière le background du dl qui représente les bords du menu !!!
Je comptais rajouter sur la balise dt un

style="background-image:none;"

, mais ceci n'écrase pas le background appliqué sur le dl ...

Voici le code html :

    <div id="branding" style="position:absolute; visibility:show;">

<dl id="menu">

        <dt><img src="images/hautmenu.gif" height="24" width="155"/></dt>
        <dt></dt>
		<dt onmouseover="javascript:montre('smenu1');" style="padding-left:15px;cursor:pointer;"><p class="flag"><img src="images/point.gif" height="18" width="17" /><span>Grossesse</span></p></dt>

			<dd id="smenu1">
				<ul>
					<li><a href="grossesse_first.php" class="menu">1er Trimestre</a></li>
					<li><a href="grossesse_first_2.php" class="menu">2&egrave;me Trimestre</a></li>
					<li><a href="grossesse_first_3.php" class="menu">3&egrave;me Trimestre</a></li>
				</ul>
			</dd>		

		<dt onmouseover="javascript:montre('smenu3');" style="padding-left:15px;cursor:pointer;"><p class="flag"><img src="images/point.gif" height="18" width="17" /><span>Photos</span></p></dt>

			<dd id="smenu3">
				<ul>
				    <li><a href="gallery_flash/armand.php?gallerie=naissanceArmand&hidemenu=" class="menu">Naissance</a></li>
					<li><a href="gallery_flash/armand.php?gallerie=bebeArmand01m&hidemenu=" class="menu">0-1 mois</a></li>
					<li><a href="gallery_flash/armand.php?gallerie=bebeArmand13m&hidemenu=" class="menu">1-3 mois</a></li>				
                </ul>
			</dd>

		<dt onmouseover="javascript:montre('');" style="padding-left:15px;"><p class="flag"><img src="images/point.gif" height="18" width="17"/><span><a href="videoArmand.php" class="menu">Vid&eacute;os</a></span></p></dt>
		<dt></dt>
		<dt><img src="images/basmenu.gif" height="83" width="155" /></dt>
</dl>

       </div>

et voici la css :

body	{ background-color: #a0c4dd; background-image: url('images/fond.gif'); background-position: center center; background-attachment: fixed; background-repeat: repeat-y; -moz-user-select: none;}

a.menu:link 		{font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #3e5667;	text-decoration: underline;}
a.menu:visited 		{font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #3e5667;	text-decoration: underline;}
a.menu:hover 		{font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #36729a;	text-decoration: none;	background-color: #ffe4b5;}
a.menu:active 		{font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #36729a;	text-decoration: none;	background-color: #ffe4b5;}

.text	 			{font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #3e5667;}
.title	 			{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #3e5667; font-weight: bold;}
.subtitle	 		{font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #3e5667; font-weight: bold;}
.minus     	 		{font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #3e5667; font-weight: bold;}

p { 
   margin: 0.1em; 
}

p.flag img, span { 
   vertical-align: middle;
   display: inline-block; 
}

p.flag span { 
   padding-left: 5px; 
}

dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;		
    color: #3e5667;
}

dl {
      background-image: url('images/fondmenu.gif');
      background-position: center center;
      background-repeat: repeat-y;
}

#menu {
    position: absolute; /* placement du menu, à modifier selon vos besoins */
    top: 0;
    left: 0;
    width: 155px;
}

#menu dt {
    height: 20px;
    line-height: 20px;
    text-align: left;
    border: 0px;
    font-size: 12px; 
    +margin-bottom: -4px; 
}

#menu dd {
    border: 1px solid white;
    width: 100px;
    margin: 0 0 0 40px;
    background-color: #fff; 
   	filter: alpha(opacity=60);
	-moz-opacity: 0.60;
	opacity:0.60;     
}

#menu li {
    text-align: left;
    background-color: #fff;
    padding: 0 0 0 5px;
}

#menu li a, #menu dt a {
    cursor: pointer;
    text-decoration: none;
    border: 0 none;
    height: 100%;
}

#menu dt a {
    display: inline;
}

#menu li a {
    font-size: 10px;
    display: block;
}

#menu li a:hover {
    background: #ffe4b5;
}

#menu dt a:hover {
    background: none;
}

Y a quelques bidouillages pour que tout marche comme je veux, peut-être pas très beau à voir mais bon ;) je débute avec les css alors on fait ce qu'n peut :)

Auriez-vous une idée pour pouvoir appliqué un background-image sur le dl et non sur le dt ou sinon comment construire mon menu pour y rajouter ces entêtes arrondis ? Ai-je été assez claire ?

Merci d'avance de vos réponse.