Chaque entête du menu déroulant de largeur différente ?

[ag56]

Bonjour,
Je souhaite personnaliser mon menu déroulant en donnant une largeur différente à chaque titre de menu "Techniques et astuces est plus large que Antiquités" comme sur l'image ci-dessous :



Mais lorsque j'ouvre mon navigateur Internet Explorer voici ce que j'obtiens alors que cela fonctionne sous Safari :



Que faut il modifier dans le fichier css ?
Merci par avance pour votre aide.

Je joints le code css ainsi que le code html :

Code css :

body {
margin: 0;
padding: 0;
background: white;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
}
dl1, dl2, dl3, dl4, dl5, dl6, dl7, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 980px;
height: auto;
}
#menu dl1 {
float: left;
width: 100px;
}
#menu dl2 {
float: left;
width: 100px;
}
#menu dl3 {
float: left;
width: 140px;
}
#menu dl4 {
float: left;
width: 200px;
}
#menu dl5 {
float: left;
width: 170px;
}
#menu dl6 {
float: left;
width: 170px;
}
#menu dl7 {
float: left;
width: 100px;
}
#menu dt {
color: white;
cursor: pointer;
line-height: 20px;
text-align: center;
font-weight: bold;
background-color: black;
background-image: url(menu.jpg);
background-repeat: no-repeat;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: black;
}
#menu li a, #menu dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background-image: url(image.jpg);
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

Code html :

<div id="menu">
<dl1>

<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl1>

<dl2>
<dt onmouseover="javascript:montre('smenu1');">Contacts</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
</ul>
</dd>
</dl2>
<dl3>
<dt onmouseover="javascript:montre('smenu2');">Visite de l'atelier</dt>

<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl3>

<dl4>
<dt onmouseover="javascript:montre('smenu3');">Photos de nos restaurations</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl4>
<dl5>
<dt onmouseover="javascript:montre('smenu4');">Techniques et astuces</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>

<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl5>
<dl6>
<dt onmouseover="javascript:montre('smenu5');">Historiques du mobilier</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>

<li><a href="#">Sous-Menu 5.1</a></li>
<li><a href="#">Sous-Menu 5.2</a></li>
<li><a href="#">Sous-Menu 5.3</a></li>
</ul>
</dd>
</dl6>
<dl7>
<dt onmouseover="javascript:montre('smenu6');">Antiquités</dt>

<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
</ul>
</dd>
</dl7>
</div>