Discussion :

[elcoyotos]

Bonjour,

J'ai tout dit dans le titre ! Comment rendre compatible le menu ci-dessous avec Internet Explorer 8 ?

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
body { font:14px/1.5em "Segoe UI", Arial, Helvetica, sans-serif; background: #000 }
a { text-decoration:none }
#menu { margin-top:30px }
nav{padding-top:210px}
#menu ul{margin:0;padding:0;list-style:none;text-align:center;font-size:0;z-index:30}
#menu li{display:inline-block;position:relative;font-size:12px;font-weight:700;border-right:1px solid #fff;text-transform:uppercase;background:#0e88ed;background:url(menu.png) repeat-x 0 0 transparent}
#menu li a{display:block;letter-spacing:normal;color:#fff;height:35px;padding-left:10px;padding-right:10px;line-height:35px;text-decoration:none}
#menu li li{display:block;background:#2ab2df;text-transform:capitalize;border:none}
#menu li li a{padding:1px;height:20px;line-height:20px}
#menu .sous-menu{background:#2ab2df url(puce.png) no-repeat 95% center}
#menu li ul{position:absolute;-webkit-box-shadow:2px 2px 4px #666;-moz-box-shadow:2px 2px 4px #666;-o-box-shadow:2px 2px 4px #666;box-shadow:2px 2px 4px #666;display:none;}
#menu a:hover,#menu li:hover>a{color:#3b81be;background:#fff}
#menu li:hover>ul{left:0;width:230px}
#menu li li:hover>ul{left:230px;top:0;-webkit-box-shadow:2px 2px 4px #666;-moz-box-shadow:2px 2px 4px #666;-o-box-shadow:2px 2px 4px #666;box-shadow:2px 2px 4px #666}
#menu .dernier{border:none}
#menu>ul>li:hover>ul,#menu>ul>li>ul>li:hover>ul{display:block;}
#menu ul .dernier ul{left:auto;right:0;}
#menu ul .dernier ul ul{left:auto;right:230px;top:0;}

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
<nav id="menu">
    <ul>              
        <li><a href="#">SUPER LIEN 1</a>
            <ul>
                <li><a href="#">Lien 1</a>
                <ul>
                    <li><a href="#">Sous-menu 1</a></li>
                    <li><a href="#">Sous-menu 2</a></li>
                    <li><a href="#">Sous-menu 3</a></li>
                </ul>
                </li>
                <li><a href="#">Lien 2</a>
                <ul>
                    <li><a href="#">Sous-menu 1</a></li>
                    <li><a href="#">Sous-menu 2</a></li>
                    <li><a href="#">Sous-menu 3</a></li>
                    <li><a href="#">Sous-menu 4</a></li>
                    <li><a href="#">Sous-menu 5</a></li>
                </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">SUPER LIEN 2</a></li>
        <li><a href="#">SUPER LIEN 3</a></li>
        <li><a href="#">SUPER LIEN 4</a></li>
        <li><a href="#">SUPER LIEN 5</a></li>
        <li class="dernier"><a href="#">SUPER Lien6</a>
        <ul>
            <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-menu 1</a></li>
                <li><a href="#">Sous-menu 2</a></li>
                <li><a href="#">Sous-menu 3</a></li>
            </ul>
            </li>
            <li><a href="#">Lien 2</a>
            <ul>
                <li><a href="#">Sous-menu 1</a></li>
                <li><a href="#">Sous-menu 2</a></li>
                <li><a href="#">Sous-menu 3</a></li>
                <li><a href="#">Sous-menu 4</a></li>
                <li><a href="#">Sous-menu 5</a></li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
</nav>

Merci d'avance à ceux qui voudront bien m'éclairer de leur lumière ...

[NoSmoking]

Bonjour,
IE8 ne connait pas la balise NAV, entre autres, soit tu la remplaces par une bonne vieille DIV soit tu utilises un petit script de prise en charge

par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[elcoyotos]

Tin bon sang mais c'est bien sur
Merci nosmoking !
Je n'avais pas pensé à ça !