Bien le bonjour.

Voilà, j'ai un petit problème sur lequel je bute depuis quelques heures et que je n'arrive pas à résoudre.

En fait, j'essaie de concevoir un menu CSS utilisant les listes, sur plusieurs "colonnes". Sous Safari Win cela s'affiche niquel-chrome :



En revanche, sur tout les autres navigateurs, c'est le drame :



J'ai beau mettre du inline, du nowrap et autres solutions plus ou moins tolérées par le W3C cela ne change rien de rien, il y a toujours un retour à la ligne indésirable, retour qui disparait dès qu'on fixe une largeur à la liste principale (or je ne veux pas ça, vu que le contenu sera dynamique)

Voici le code HTML (épuré) :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Test</title>
    <script type="text/javascript" src="js/top_menu_list.js"></script>
    <link rel="stylesheet" type="text/css" href="css/top_menu.css" media="screen" />
  </head>
 
  <body>
 
    <div id="menu_top">
      <div onmouseover="showTopMenu(2);" onmouseout="hideTopMenu(2);" id="menu_top_cat_2" class="child">
        Cat 2
        <ul style="display: none;margin: 0px;white-space: nowrap;" id="menu_top_2">
          <li class="main_option" style="float: left;">
            TATA
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdfflkf</li>
              <li>lsdsdfsdfsdkdlkf</li>
              <li>lsdkdlkf</li>
            </ul>
            TOTO
            <ul style="position: relative;">
              <li>kdsdfqsml</li>
              <li>kdqsml</li>
              <li>kdqsmsdffsdl</li>
              <li>kdqsml</li>
            </ul>
          </li>
          <li class="main_option" style="float: left;">
            TATU
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdsdfsdfsdlkf</li>
              <li>lsdkdslkf</li>
              <li>lsdkdfsdflkf</li>
            </ul>
            TOTU
            <ul style="position: relative;">
              <li>kdqsmfl</li>
              <li>kdqsmlsdfs</li>
              <li>kdqsml</li>
              <li>kdqsmsdfl</li>
            </ul>
          </li>
          <li class="main_option" style="float: left;">
            TZTU
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
            </ul>
            TDTU
            <ul style="position: relative;">
              <li>kdqsmlsdfsdfsdfsdfsdfsdfsd</li>
              <li>kdqsml</li>
              <li>kdqsml</li>
              <li>kdqsml</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

Le fichier CSS :

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#menu_top {
  background-color: #888888;
  height: 26px;
}
 
#menu_top div.child {
  display: inline;
  position: relative;
}
#menu_top ul {
  position: absolute;
  background-color: #000000;
  color: #FFFFFF;
  padding: 5px;
  font-family: Arial, Verdana;
  font-size: 11px;
  list-style-type: none;
}
#menu_top ul.sub {
  position: relative;
}
 
#menu_top li.main_option {
  float: left;
  font-weight: bold;
  text-decoration: underline;
  padding: 5px;
}
 
#menu_top ul.sublist {
  position: relative;
}
 
#menu_top ul.sublist li {
  text-decoration: none;
  font-weight: normal;
}

Et le fichier js :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var common_top_menu_id = 'menu_top_';
 
var common_top_menu_activator_id = 'menu_top_cat_';
 
var top_top_menu = 14;
 
var incremented_top_menu = false;
 
var left_top_menu = 0;
 
function showTopMenu( id ) {
 
  if ( document.getElementById( common_top_menu_id + id ) ) {
 
    if ( (navigator.userAgent.indexOf('MSIE') != -1 || navigator.userAgent.indexOf('Opera') != -1) && incremented_top_menu == false ) {
 
      incremented_top_menu = true;
      top_top_menu += document.getElementById( common_top_menu_activator_id + id) . offsetTop - 4;
 
    }
 
    document.getElementById( common_top_menu_id + id ) . style . left = left_top_menu + 'px';
    document.getElementById( common_top_menu_id + id ) . style . top = top_top_menu + 'px';
 
    document.getElementById( common_top_menu_id + id ).style.display = 'block';
 
  }
 
}
 
function hideTopMenu( id ) {
 
  if ( document.getElementById( common_top_menu_id + id ) ) {
 
    document.getElementById( common_top_menu_id + id ).style.display = 'none';
 
  }
 
}

Bon c'est un peu brouillon dans les propriétés CSS, mais quoi que je retire ou ajoute cela ne change pas. Quelqu'un peut-il m'aider ?

Merci d'avance