Menu déroulant en CSS

Le javascript n'est utilisé que pour Internet Explorer dans ses versions antérieures à la version 7. Pour les autres navigateurs, ce design fonctionnera même si l'internaute à désactivé le javascript.

Cette mise en page illustre la façon de créer un menu déroulant à l'aide de styles CSS. Ce menu est opérationnel pour tous les navigateurs excepté pour les internautes utilisant Explorer 5.5 et 6 et ayant désactivé le javascript.

Menu
- Extras
  - Demander la note
  - Draguer la serveuse
- Entrée
- Plat
- Dessert
- Café

CODE :

<html>
 <head>
	<style type="text/css">
		ul ul {display: none; position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
		li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
		li:hover, li.sfhover {background-color: #FFFF70;}
		li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3 {display: block}
		li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
	</style>
	<!--[if lt IE7]>
		<script type="text/javascript">
			// Fonction destinée à remplacer le "LI:hover" pour IE 6
			sfHover = function() {
				var sfEls = document.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>

    <![endif]-->
   </head>
   <body>
		<ul class="niveau1">
			<li><a href="http://www.rankspirit.com"> Menu</a>

			<!-- Remplacer les liens "http://www.rankspirit.com"  -->
			<!-- par les adresses de vos pages pour que ce menu   -->
			<!-- permette de naviguer à l'intérieur de votre site.-->

				<ul class="niveau2">
					<li class="plus"><a href="http://www.rankspirit.com"> Extras</a>						<ul class="niveau3">
							<li><a href="http://www.rankspirit.com">Demander la note</a></li>
							<li><a href="http://www.rankspirit.com">Draguer la serveuse</a></li>
						</ul>
					</li>
					<li><a href="http://www.rankspirit.com">Entr&eacute;e</a></li>
					<li><a href="http://www.rankspirit.com">Plat</a></li>
					<li><a href="http://www.rankspirit.com">Dessert</a></li>
					<li><a href="http://www.rankspirit.com">Caf&eacute;</a></li>
				</ul>
 			</li>
		</ul>
   </body>
</html>