Menu déroulant avec IE
Fermé
syldup
Messages postés
11
Date d'inscription
mercredi 27 juin 2012
Statut
Membre
Dernière intervention
22 mars 2015
-
27 juin 2012 à 18:47
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 28 juin 2012 à 10:21
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 28 juin 2012 à 10:21
A voir également:
- Menu déroulant avec IE
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Windows 11 menu démarrer classique - Guide
- Menu déroulant google sheet - Guide
- Supprimer menu déroulant excel - Forum Word
3 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
27 juin 2012 à 22:18
27 juin 2012 à 22:18
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 ;-)
a+
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+
syldup
Messages postés
11
Date d'inscription
mercredi 27 juin 2012
Statut
Membre
Dernière intervention
22 mars 2015
11
28 juin 2012 à 08:53
28 juin 2012 à 08:53
Bonjour,
Merci pour votre aide.
Ça fonctionne avec chrome et Mozilla mais pas avec IE 7
Que faire
Cordialement
Syldup
Merci pour votre aide.
Ça fonctionne avec chrome et Mozilla mais pas avec IE 7
Que faire
Cordialement
Syldup
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
28 juin 2012 à 10:21
28 juin 2012 à 10:21
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+
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+