Bonjour,
Je cherche à faire un menu déroulant suivant la méthode indiqué par E. Meyer dans son livre CSS par Meyer - Projet 6.
IE6 réagit différement que FireFox pour les background.
J'ai un 1er niveau de menu avec background en jaune.
Les choix finaux doivent apparaitre en rouge.
Sous IE, ils sont tous en jaune, alors que sous FF le menu réagit comme attendu.
Y a-t-il une erreur dans mon code ? ou un moyen de forcer IE à prendre en compte ma demande ?
Merci de votre aide
Je cherche à faire un menu déroulant suivant la méthode indiqué par E. Meyer dans son livre CSS par Meyer - Projet 6.
IE6 réagit différement que FireFox pour les background.
J'ai un 1er niveau de menu avec background en jaune.
Les choix finaux doivent apparaitre en rouge.
Sous IE, ils sont tous en jaune, alors que sous FF le menu réagit comme attendu.
Y a-t-il une erreur dans mon code ? ou un moyen de forcer IE à prendre en compte ma demande ?
Merci de votre aide
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project 6</title>
<style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* Comportement IE par rapport au survol */
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;
border-left: 1px solid;}
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
/*div#nav li:hover {background: #EBB;}*/
div#nav li:hover {background: red;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
/* div#nav li.submenu:hover {background: #EDD;}*/
div#nav li.submenu:hover {background: yellow;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em; }
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display: block;}
</style>
</head>
<body>
<h1>Adipiscing Rhubarb</h1>
<div id="nav">
<ul class="level1">
<li><a href="/">Home</a></li>
<li class="submenu"><a href="/services/">Services</a>
<ul class="level2">
<li><a href="/services/strategy/">Strategy</a></li>
<li><a href="/services/optimize/">Optimization</a></li>
<li><a href="/services/guidance/">Guidance</a></li>
<li><a href="/services/training/">Training</a></li>
</ul>
</li>
<li><a href="/events/">Events</a></li>
<li class="submenu"><a href="/pubs/">Publications</a>
<ul class="level2">
<li><a href="/pubs/articles/">Articles</a></li>
<li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
<ul class="level3">
<li><a href="/pubs/tuts/html/">HTML</a></li>
<li><a href="/pubs/tuts/css/">CSS</a></li>
<li><a href="/pubs/tuts/svg/">SVG</a></li>
<li><a href="/pubs/tuts/xml/">XML</a></li>
</ul>
</li>
<li><a href="/pubs/wpapers/">White Papers</a></li>
<li><a href="/pubs/comment/">Commentary</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</body>
</html>