Sujet Précédent Sujet Suivant

Menu déroulant avec IE

syldup Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -  
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjour,

J'ai utilisé "CSS Menu générator" pour réaliser un menu horizontal.
Avec Mozilla et Google Chrome ça fonctionne bien mais pas avec IE 7.
Que faire
Cordialement

A voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Salut

voila un exemple de menu en CSS3 mais qui passe bien meme sur IE<9!

PS:les images dans le CSS sont en base64 pour que tu puisse les avoir si tu te sert de ce menu !
converti les et change les liens ;-) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
   /*<![CDATA[*/

body{
    background-color: #444;
    }
    #menu{
    text-align: center;
    }

    ul#radmenu, ul#radmenu ul{
    margin: 0;
    list-style: none;
    padding: 0;
    background-color: #000;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
    background-repeat: repeat;
    border-width: 0px;
    border-style: solid;
    border-color: #999;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }

    ul#radmenu ul{
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    -moz-box-shadow: 0.7px 0.7px 1px #777777;
    -webkit-box-shadow: 0.7px 0.7px 1px #777777;
    box-shadow: 0.7px 0.7px 1px #777777;
    background-color: #333;
    background-image: none;
    border-width: 1px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-style: solid;
    border-color: #5A5E60;
    padding: 0 9px 9px;
    }

    ul#radmenu li:hover > *{
    display: block;
    }

    ul#radmenu li{
    width: 113px ;
    position: relative;
    zoom: 1;
    display: block;
    white-space: nowrap;
    font-size: 0;
    float: left;
    }

    ul#radmenu li:hover{
    z-index: 1;
    }

    ul#radmenu ul ul{
    position: absolute;
    left: 100%;
    top: 0;
    }

    ul#radmenu{
    padding: 1px 1px 1px 0;
    font-size: 0;
    z-index: 999;
    position: relative;
    display: inline-block;
    zoom: 1;
    *display: inline;
    }

    ul#radmenu > li, ul#radmenu li{
    margin: 0 0 0 1px;
    }

    * html ul#radmenu li a{
    display: inline-block;
    }

    ul#radmenu ul > li{
    margin: 1px 0 0;
    }

    ul#radmenu a:active, ul#radmenu a:focus{
    outline-style: none;
    }

    ul#radmenu a, ul#radmenu a.pressed{
    display: block;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    font: bold 12px Verdana;
    color: #ccc;
    cursor: pointer;
    }

    ul#radmenu ul li{
    float: none;
    margin: 9px 0 0;
    }

    ul#radmenu ul a{
    text-align: left;
    padding: 8px 0 0 0;
    background-color: #333;
    background-image: none;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #262626;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    font: 13px Verdana;
    color: #ccc;
    text-decoration: none;
    }

    ul#radmenu li:hover > a{
    background-color: #00c4ff;
    border-style: none;
    font: bold 12px Verdana;
    color: #fff;
    text-decoration: none;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
    background-position: 0 100px;
    }

    ul#radmenu img{
    border: none;
    vertical-align: middle;
    margin-right: 10px;
    }

    ul#radmenu img.over{
    display: none;
    }

    ul#radmenu li:hover > a img.def{
    display: none;
    }

    ul#radmenu li:hover > a img.over{
    display: inline;
    }

    ul#radmenu li a.pressed img.over{
    display: inline;
    }

    ul#radmenu li a.pressed img.def{
    display: none;
    }

    ul#radmenu span{
    display: block;
    overflow: visible;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 0px;
    }

    ul#radmenu ul span{
    background-image: url("data:image/gif;base64,R0lGODlhBwAMAKIFAL6+vtra2ry8vL29vcjIyP///wAAAAAAACH5BAEAAAUALAAAAAAHAAwAAAMZWLoVZoyMFwVdEkaglREWxmETZmlZ53RFAgA7");
    padding-right: 27px;
    }
    #topmenu a{
    height: 14px;
    line-height:14px ;
    }

    ul#radmenu a{
    padding: 10px;
    background-color: #333;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
    background-repeat: repeat;
    background-position: 0 200px;
    border-width: 0px;
    border-style: none;
    border-color:;
    color: #ccc;
    text-decoration: none;
    }

    ul#radmenu li:hover > a, ul#radmenu li > a.pressed{
    background-color: #00c4ff;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");
    background-position: 0 100px;
    border-style: none;
    color: #fff;
    text-decoration: none;
    }

    ul#radmenu ul li:hover > a, ul#radmenu ul li > a.pressed{
    background-color: #333;
    background-image: none;
    border-style: solid;
    border-color: #262626;
    font: 13px Verdana;
    color: #1F80AE;
    text-decoration: none;
    }

    ul#radmenu li.toppremier > a{
    border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    text-shadow: #000000 0px -1px 1px;
    }

    ul#radmenu li.toppremier:hover > a, ul#radmenu li.toppremier > a.pressed{
    text-shadow: #3d3d3d 0px -1px 1px;
    }

    ul#radmenu li.topmenu > a{
    text-shadow: #000000 0px -1px 1px;
    }

    ul#radmenu li.topmenu:hover > a, ul#radmenu li.topmenu > a.pressed{
    text-shadow: #3d3d3d 0px -1px 1px;
    }

    ul#radmenu li.topdernier > a{
    border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    text-shadow: #000000 0px -1px 1px;
    }

    ul#radmenu li.topdernier:hover > a, ul#radmenu li.topdernier > a.pressed{
    text-shadow: #3d3d3d 0px -1px 1px;
    }

    ul#radmenu ._ > li > a{
    padding: 0;
    }

    ul#radmenu li.subpremier > a{
    border-width: 0;
    border-style: none;
    padding: 0;
    }

    ul#radmenu li.subpremier:hover > a, ul#radmenu li.subpremier > a.pressed{
    border-style: none;
    }
   /*]]>*/
   </style></head>
  <body>
    <div id="menu">
      <ul id="radmenu" class="topmenu">
        <li class="toppremier">
          <a href="#"><span>Menu 0</span></a>
          <ul>
            <li class="subpremier">
              <a href="#">Menu 0 0</a>
            </li>
            <li>
              <a href="#">Menu 0 1</a>
            </li>
            <li>
              <a href="#">Menu 0 2</a>
            </li>
            <li>
              <a href="#"><span>Menu 0 3</span></a>
              <ul>
                <li class="subpremier">
                  <a href="#">Menu 0 3 0</a>
                </li>
                <li>
                  <a href="#">Menu 0 3 1</a>
                </li>
                <li>
                  <a href="#"><span>Menu 0 3 2</span></a>
                  <ul>
                    <li class="subpremier">
                      <a href="#">Menu 0 3 2 0</a>
                    </li>
                    <li>
                      <a href="#">Menu 0 3 2 1</a>
                    </li>
                    <li>
                      <a href="#">Menu 0 3 2 2</a>
                    </li>
                    <li>
                      <a href="#">Menu 0 3 2 3</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="topmenu">
          <a href="#"><span>Menu 1</span></a>
          <ul>
            <li class="subpremier">
              <a href="#">Menu 1 0</a>
            </li>
            <li>
              <a href="#">Menu 1 1</a>
            </li>
            <li>
              <a href="#"><span>Menu 1 2</span></a>
              <ul>
                <li class="subpremier">
                  <a href="#">Menu 1 2 0</a>
                </li>
                <li>
                  <a href="#">Menu 1 2 1</a>
                </li>
                <li>
                  <a href="#">Menu 1 2 2</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="topmenu">
          <a href="#"><span>Menu 2</span></a>
          <ul>
            <li class="subpremier">
              <a href="#">Menu 2 0</a>
            </li>
            <li>
              <a href="#"><span>Menu 2 1</span></a>
              <ul>
                <li class="subpremier">
                  <a href="#">Menu 2 1 0</a>
                </li>
                <li>
                  <a href="#"><span>Menu 2 1 1</span></a>
                  <ul>
                    <li class="subpremier">
                      <a href="#">Menu 2 1 1 0</a>
                    </li>
                    <li>
                      <a href="#">Menu 2 1 1 1</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Menu 2 2</a>
            </li>
          </ul>
        </li>
        <li class="topmenu">
          <a href="#"><span>Menu 3</span></a>
          <ul>
            <li class="subpremier">
              <a href="#"><span>Menu 3 0</span></a>
              <ul>
                <li class="subpremier">
                  <a href="#">Menu 3 0 0</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Menu 3 1</a>
            </li>
            <li>
              <a href="#">Menu 3 2</a>
            </li>
          </ul>
        </li>
        <li class="topdernier">
          <a href="#">Menu 4</a>
        </li>
      </ul>
    </div>
  </body>
</html>


a+
0
Réponse 2 / 3
syldup Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   11
 
Bonjour,
Merci pour votre aide.
Ça fonctionne avec chrome et Mozilla mais pas avec IE 7
Que faire
Cordialement
Syldup
0
Réponse 3 / 3
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Salut

sur IE7 pas de problemes chez moi !!

sur IE6 oui il y as des problemes , mais plus personne ne devrait utiliser IE6 !!
meme les utilisateur XP peuvent passer jusqu en vs IE 8 !

pour IE9 et IE10 il faut vista ou 7
a+
0

Discussions similaires

TV continental Edison bloqué sur le menu
Utilisateur anonyme -
jeannets -

1 réponse
Suppression listes déroulantes
Archa -
Sam -

5 réponses
accéder au menu caché
Kabos -
Andy31200 -

1 réponse
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
supprimer une liste déroulante
fred94 -
m@rina -

5 réponses