[résolu] Menu déroulant en css... qui disparaît avec IE7

Bonjour à tous,
Je viens de remarquer que le site que j'avais fabriqué avec des menus déroulants écrits en .css ne fonctionne plus sous IE7. Le menu en entier est devenu invisible... si quelqu'un pouvait m'aider à comprendre le problème, je serais très reconnaissant. Le site fonctionnait parfaitement sous IE6 (avec quelques hacks) et sous Firefox et Opera, bien sûr. Il s'agit peut-être d'un problème de z-index, ou bien de la propriété hide, mais je suis trop inexpérimenté en programmation web pour en être certain.
L'adresse du site: http://www.saes07.univ-avignon.fr/
et le css du menu déroulant pour IE6:

  table { border: 0pt none ;
    padding: 0pt;
    border-collapse: collapse;
    font-weight: normal;
    z-index: 10;
    }

  .menu ul li a.hide, .menu ul li a.hide:visited { display: none;
    }

  .menu ul li a:hover ul li a.hide { display: none;
    }

  .menu ul li a:hover { border: 1px solid rgb(18, 73, 148);
    background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    color: rgb(18, 73, 148);
    }

  .menu ul li a:hover ul { display: block;
    position: absolute;
    top: 0pt;
    left: 105px;
    width: 105px;
    }

  .menu ul li a:hover ul li a.sub { background: rgb(18, 73, 148) none repeat scroll 0% 50%;
    color: rgb(255, 255, 255);
    }

  .menu ul li a:hover ul li a { background: rgb(18, 73, 148) none repeat scroll 0% 50%;
    display: block;
    color: rgb(255, 255, 255);
    width: 150px;
    }

  .menu ul li a:hover ul li a ul { visibility: hidden;
    }

  .menu ul li a:hover ul li a:hover { background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    color: rgb(18, 73, 148);
    }

  .menu ul li a:hover ul li a:hover ul { visibility: visible;
    position: absolute;
    left: 151px;
    top: 0pt;
    }

  .menu ul li a:hover ul li a:hover ul li a { background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    color: inherit; display: block;
    width: 200px;
    }

  .menu ul li a:hover ul li a:hover ul li a:hover { background: rgb(243, 241, 238) none repeat scroll 0% 50%;  color: inherit;
    } 

et pour les autres:

  .menu { font-family: arial,sans-serif;
    width: 106px;
    height: 150px;
    position: absolute;
    font-size: 11px;
    z-index: 20;
    margin-top: 160px;
    margin-left: 20pt;
    color: rgb(243, 241, 238);
    }

  .menu ul li a, .menu ul li a:visited { border: 1px solid rgb(243, 241, 238);
    background: rgb(18, 73, 148) none repeat scroll 0% 50%;
    display: block;
    text-decoration: none;
    width: 104px;
    text-align: center;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11pt;
    line-height: 19pt;
    height: 25px;
    color: rgb(243, 241, 238);
    }

  .menu ul { margin: 0pt;
    padding: 0pt;
    list-style-type: none;
    }

  .menu ul li { float: left;
    margin-right: 1px;
    position: relative;
    }

  .menu ul li ul { display: none;
    }

  .menu ul li:hover a { border: 1px solid rgb(18, 73, 148);
    background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    color: rgb(18, 73, 148);
    }

  .menu ul li:hover ul { display: block;
    position: absolute;
    top: 0pt;
    left: 105px;
    width: 105px;
    color: rgb(243, 241, 238);
    }

  .menu ul li:hover ul li a.hide { border: 1px solid rgb(243, 241, 238);
    background: rgb(18, 73, 148) none repeat scroll 0% 50%;
    color: rgb(243, 241, 238);
    }

  .menu ul li:hover ul li:hover a.hide { width: 150px;
    }

  .menu ul li:hover ul li ul { display: none;
    }

  .menu ul li:hover ul li a { border: 1px solid rgb(243, 241, 238);
    background: rgb(18, 73, 148) none repeat scroll 0% 50%;
    display: block;
    width: 150px;
    color: rgb(255, 255, 255);
    }

  .menu ul li:hover ul li a:hover { border: 1px solid rgb(18, 73, 148);
    background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    color: rgb(18, 73, 148);
    }

  .menu ul li:hover ul li:hover ul { display: block;
    position: absolute;
    left: 151px;
    top: 0pt;
    background-color: rgb(243, 241, 238);
    color: rgb(0, 0, 102);
    }

  .menu ul li:hover ul li:hover ul li a { background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    display: block;
    width: 200px;
    color: rgb(18, 73, 148);
    }

  .menu ul li:hover ul li:hover ul li a:hover { background: rgb(243, 241, 238) none repeat scroll 0% 50%;
    color: rgb(18, 73, 148);
    }

Merci beaucoup d'avoir lu jusque là et merci d'avance pour l'aide!
Sigma.
Modifié par sigma (10 Dec 2006 - 11:30)

Après quelques recherches le problème est résolu: dans le html, la page d'origine contenait trois liens vers des fichiers css dont un exprès pour IE. En remplaçant <link title="flyout_ie" media="all" rel="stylesheet" href="../css/flyout_ie.css" type="text/css" /> par <!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]--> c'est-à-dire par un commentaire conditionnel visant seulement IE 6, tout rentre dans l'ordre. Firefox, IE 7 etc. ignorent le fichier et les commentaires conditionnels qui en dépendent tandis que IE 6 y réagit comme avant.
Sigma.