Problème menu déroulant javascript + CSS

Bonjour à tous,
Je suis en train de réaliser un site et j'ai réalisé un menu dont une partie est un menu déroulant.
Tout marche niquel mais le problème est que lorsque le menu se déroule, mes "li" qui ont pourtant une apparence normale se rallongent sur la droite en transparence ce qui a pour effet de prolonger mon site sur la droite sur quelques centaines de pixels (pas de déformation cependant, le site reste en place, il y a juste un espace blanc sur la droite).
A cause de ceci, une scrollbar horizontale apparait en bas de la page du coup, et sous Safari, même lorsque le menu déroulant n'est plus déroulé, cette scrollbar reste affichée en bas, mais on ne peux plus l'utiliser, elle est comme taggée sur ma page...
En gros, c'est comme si mes "li" ne faisaient pas les 130 pixels de largeur souhaité mais eaucoup plus en prolongement sur la droite

Voici mon code :

Script :
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>

CSS:
<style type="text/css">
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width: 137px;
}
#menuderoulant {
top: 0;
left: 0;
z-index: 100;
height: 23px;
width: 137px;
position: relative;
}
#menuderoulant dl {
width: 137px;
}
#menuderoulant dt {
cursor: pointer;
background-image:url(images/menu3.jpg);
width: 137px;
height: 23px;
color: #006600;
font-family: "Helvetica Neue";
font-size: 14px;
}
#menuderoulant li {
background-image: url(<?php echo $chemin?>images/menu3.jpg);
text-align: left;
width: 137px;
border: 1px solid white;
}
#menuderoulant li a, #menuderoulant dt a {
color: #006600;
text-decoration: none;
display: block;
width:inherit;
}
#menuderoulant li a:hover, #menuderoulant dt a:hover {
color: #00216B;
width: 137px;
}
#menuderoulant ul a:hover {
width: 137px;
}
#menuderoulant ul a:hover {
width: 137px;
}
</style>


Page php :
<div id="menuderoulant">
<dl onMouseOver="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<dt><table width="100%"><tr>
<td valign="middle" align="center">Loisirs & Sports </td>
</tr></table></dt>
<dd id="smenu1">
<ul>
<li><a href="#"><strong>•</strong> Parcs d'attraction</a></li>
<li><a href="#"><strong>•</strong> Tourisme fluvial</a></li>
<li><a href="#"><strong>•</strong> Centres équestres</a></li>
<li><a href="#"><strong>•</strong> Sports mécaniques</a></li>
<li><a href="#"><strong>•</strong> Circuits VTT</a></li>
<li><a href="#"><strong>•</strong> Voies vertes</a></li>
<li><a href="#"><strong>•</strong> Sports nautiques</a></li>
<li><a href="#"><strong>•</strong> Golf</a></li>
<li><a href="#"><strong>•</strong> Piscines</a></li>
<li><a href="#"><strong>•</strong> Bowling, billard</a></li>
<li><a href="#"><strong>•</strong> Discothèques</a></li>
</ul>
</dd>
</dl>
</div>



Je ne sais pas si j'ai été très clair car c'est difficile d'expliquer ce problème sans le voir...

Je vous remercie par avance de votre aide !