tag:blogger.com,1999:blog-282607342011-04-21T16:52:29.187-07:00bonbecohttp://www.blogger.com/profile/09439274810920087917noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-28260734.post-1147864688596832032006-05-17T04:13:00.000-07:002006-05-17T04:18:29.396-07:00<i>Salut, c'est pour un essai</i><br /><br /><br /><style type="text/css"><br /><!-- body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; top: 0; left: 0; z-index:100; width: 100%; } #menu dl { float: left; width: 12em; margin: 0 1px; } #menu dt { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; } #menu dd { border: 1px solid gray; } #menu li { text-align: center; background: #fff; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu dt a:hover { background: #eee; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } a {text-decoration: none; color: black; color: #222; } --><br /></style><br /><br /><br /><br /><br /><div id="menu"><br /><dl><br /><dt onmouseover="javascript:montre();"><a title="Retour à l'accueil" href="http://www.blogger.com/">Accueil</a></dt><br /></dl><br /><br /><dl><br /><dt onmouseover="javascript:montre('smenu1');">Menu 1</dt><br /><dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><br /><ul><br /><li><a href="#">Sous-Menu 1.1</a></li><br /><li><a href="#">Sous-Menu 1.2</a></li><br /><li><a href="#">Sous-Menu 1.3</a></li><br /><li><a href="#">Sous-Menu 1.4</a></li><br /><li><a href="#">Sous-Menu 1.5</a></li><br /><li><a href="#">Sous-Menu 1.6</a></li><br /></ul><br /></dd><br /></dl><br /><br /><br /><dl><br /><dt onmouseover="javascript:montre('smenu2');">Menu 2</dt><br /><dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"><br /><ul><br /><li><a href="#">Sous-Menu 2.1</a></li><br /><li><a href="#">Sous-Menu 2.2</a></li><br /><li><a href="#">Sous-Menu 2.3</a></li><br /><li><a href="#">Sous-Menu 2.4</a></li><br /></ul><br /></dd><br /></dl><br /><br /><dl><br /><dt onmouseover="javascript:montre('smenu3');">Menu 3</dt><br /><dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"><br /><ul><br /><li><a href="#">Sous-Menu 3.1</a></li><br /><li><a href="#">Sous-Menu 3.2</a></li><br /><li><a href="#">Sous-Menu 3.3</a></li><br /><li><a href="#">Sous-Menu 3.4</a></li><br /><li><a href="#">Sous-Menu 3.5</a></li><br /></ul><br /></dd><br /></dl><br /><br /><dl><br /><dt onmouseover="javascript:montre('smenu4');">Menu 4</dt><br /><dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"><br /><ul><br /><li><a href="#">Sous-Menu 4.1</a></li><br /><li><a href="#">Sous-Menu 4.2</a></li><br /><li><a href="#">Sous-Menu 4.3</a></li><br /></ul><br /></dd><br /></dl><br /><br /></div><br /><br /><br /><div id="site"><br /><h1>Menu horizontal déroulant en CSS</h1><br /><p>Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird</p><br /><p>Il vous suffit d'adapter le code source de cette page à vos besoins. </p><br /><p>Raphaël GOETTER<br /><br /><a href="http://www.alsacreations.com">Alsacréations</a><br /><br /><a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Explications / Explanations</a></p><br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/28260734-114786468859683203?l=bonbec.blogspot.com' alt='' /></div>bonbecohttp://www.blogger.com/profile/09439274810920087917noreply@blogger.com0