Menu déroulant IE8

**jip31** · 13/10/2012, 12h05

Bonjour

J'utilise le code ci-dessous pour faire un menu déroulant mais mon navigateur IE8 n'arrive malgré tout pas à interpréter le code à cause du bug sur le comportement HOVER

Code :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
      <style type="text/css">
  behavior: url("csshover3.htc");
 
        #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
        #monmenu ul ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu ul.niveau2 {left: 0px; top: 22px;}
#monmenu ul.niveau3 {left: 144px; top: -1px;}
 
        #monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
        #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
        #monmenu li a {text-decoration:none;}
        #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
        #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
      </style>
      <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
     <meta name="keywords"
 content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
     <meta name="description"
 content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
     <title>Exemple de menu hiérarchique en CSS</title>
  </head>
  <body>
    <div id="monmenu">
        <ul class="niveau1">
           <li> Menu
               <ul class="niveau2">
                  <li class="plus">
                    <a href= "http://www.rankspirit.com">
                       <img alt=" " src="illustrations/ menu-deroulant/ bebe.gif"
 border="none">
                       Extras
                    </a>
                    <ul class="niveau3">
                      <li>
                        <a href= "http://www.rankspirit.com">
                            <img alt=" " src="illustrations/ menu-deroulant/ note.gif"
 border="none">
                           Demander la note
                         </a>
                        </li>
                        <li>
                            <a href= "http://www.rankspirit.com">
                                <img alt=" "
 src="illustrations/ menu-deroulant/ serveuse.gif"
 border="none">                 Draguer la serveuse
                            </a>
                        </li>
                    </ul>
                  </li>
                  <li>
                    <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ entree.gif"
 border="none">
                        Entrée
                    </a>
                  </li>
                  <li>
                    <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ plat.gif"
 border="none">
                        Plat
                    </a>
                  </li>
                  <li>
                     <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ dessert.gif"
 border="none">
                        Dessert
                     </a>
                   </li>
                   <li>
                      <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ cafe.gif"
 border="none">         Café
                      </a>
                   </li>
                </ul>
              </li>
        </ul>
    </div>
  </body>
</html>