Menu vertical sous IE

Bonjour,

Voilà j'ai des problèmes de taille des éléments de mon menu vertical sous IE.
En fait, IE ne prend pas en compte la taille de la div qui contient mon menu.
Ce qui fait que les éléments de mon menu débordent de la div en question lors du passage de la souris. Mon menu ressemble à la variante de menu verticale de la galerie d'alsacréations.

Je pense que c'est un problème d'héritage entre les éléments parents enfants.

Voici la partie CSS en question :

/* jcssMenu */
#jcssMenu { width: 140px; display: block;}
.jcssMenu ul { z-index: 100; padding: 0; margin: 0; border: 0; list-style: none; }
.jcssMenu ul li { z-index: 100; width: 137px; float: left; position: relative; display: block; clear: both; height: auto; }
.jcssMenu ul li:hover >a{ z-index: 100; width: 137px; float: left; position: relative; display: block; clear: both; height: auto;}
.jcssMenu ul li ul { border: 1px solid #9d7b53; position: absolute; top: 0; left: 100%; visibility: hidden; }
.jcssMenu ul>li>ul { border: 0; }
.jcssMenu ul li ul li { background: #fffef6 url('ext/jcssmenu/images/mbar.gif') repeat-y; }
.jcssMenu ul>li>ul>li { min-width: 140px; width: auto; }
.jcssMenu ul>li>ul>li { border: 0; border-color: #9d7b53; border-style: solid; border-right-width: 1px; border-left-width: 1px; }
.jcssMenu ul>li>ul>li:first-child { border-top-width: 1px; }
.jcssMenu ul>li>ul>li:last-child { border-bottom-width: 1px; }

/* pseudo support */
.jcssMenu ul li:hover ul { visibility: visible; }
.jcssMenu ul li:hover ul ul { visibility: hidden; }
.jcssMenu ul ul li:hover ul { visibility: visible; }
.jcssMenu ul ul li:hover ul ul { visibility: hidden; }
.jcssMenu ul ul ul li:hover ul { visibility: visible; }
.jcssMenu ul ul ul li:hover ul ul { visibility: hidden; }
.jcssMenu ul ul ul ul li:hover ul { visibility: visible; }
.jcssMenu ul ul ul ul li:hover ul ul { visibility: hidden; }
.jcssMenu ul ul ul ul ul li:hover ul { visibility: visible; }
.jcssMenu ul ul ul ul ul li:hover ul ul { visibility: hidden; }

.jcssMenu a { color: #6b5a46; min-width: 140px; width: auto; margin: 0; padding: 2px; white-space: nowrap; height: auto; position: relative; display: block; }
.jcssMenu a.hover, .jcssMenu a:hover { color: #6b5a46; background: #e7d1b6; text-decoration: none; padding: 1px; border:1px solid black; display: block;}
.jcssMenu li:hover>a { color: #6b5a46; background: #e7d1b6; text-decoration: none; padding: 1px; border:1px solid black; }
.jcssMenu .icon {  background: url('ext/jcssmenu/images/icons/livre.gif') no-repeat 1px 50%; display: block; }
.jcssMenu .submenu {  background: url('ext/jcssmenu/images/arrow.gif') no-repeat 98% 50%; min-width: 140px; width: 140px; display: block; }
.jcssMenu .text { text-indent: 18px; padding: 1px 10px 1px 0px; display: block; }
.jcssMenu .selected { font-weight: bold; }

Quelqu'un aurait-il une idée pour résoudre mon problème.
Merci beaucoup.

Bonjour,

Après quelques tests, j'ai réussi à définir l'élément qui pose problème.
C'est un float left que IE gère mal.

Je n'arrive pas à trouver la "formule miracle" qui me permettrait de réduire la largeur de ce bloc.

Quelqu'un pourrait-il m'aider ???

Merci beaucoup.