<!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="fr" lang="fr">
  <head>
    <title>
      Menu déroulant horizontal
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
    <style type="text/css">
      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;
	border: 1px solid gray;
	background-color: #0066CC;
      }
      #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-color: #66CCFF;
      }
      a {text-decoration: none;
      color: black;
      color: #222;
      }
      -->
    </style>
  </head>

  <body>
    <div id="menu">
      <dl>
        <dt onmouseover="javascript:montre();">
          <a href="#" title="Retour à l'accueil">Accueil</a>
        </dt>
      </dl> 
      <dl>
        <dt onmouseover="javascript:montre('smenu1');">

          Menu 1
        </dt>
        <dd id="smenu1">
          <ul>
            <li>
            <a href="#">Sous-Menu 1.1</a></li>
            <li>
            <a href="#">Sous-Menu 1.2</a></li>

            <li>
            <a href="#">Sous-Menu 1.3</a></li>
            <li>
            <a href="#">Sous-Menu 1.4</a></li>
            <li>
            <a href="#">Sous-Menu 1.5</a></li>
            <li>

            <a href="#">Sous-Menu 1.6</a></li>
          </ul>
        </dd>
      </dl>  
      <dl>
        <dt onmouseover="javascript:montre('smenu2');">
          Menu 2
        </dt>
        <dd id="smenu2">

          <ul>
            <li>
            <a href="#">Sous-Menu 2.1</a></li>
            <li>
            <a href="#">Sous-Menu 2.2</a></li>
            <li>
            <a href="#">Sous-Menu 2.3</a></li>

            <li>
            <a href="#">Sous-Menu 2.4</a></li>
          </ul>
        </dd>
      </dl> 
      <dl>
        <dt onmouseover="javascript:montre('smenu3');">
          Menu 3
        </dt>

        <dd id="smenu3">
          <ul>
            <li>
            <a href="#">Sous-Menu 3.1</a></li>
            <li>
            <a href="#">Sous-Menu 3.2</a></li>
            <li>
            <a href="#">Sous-Menu 3.3</a></li>

            <li>
            <a href="#">Sous-Menu 3.4</a></li>
            <li>
            <a href="#">Sous-Menu 3.5</a></li>
          </ul>
        </dd>
      </dl> 
      <dl>

        <dt onmouseover="javascript:montre('smenu4');">
          Menu 4
        </dt>
        <dd id="smenu4">
          <ul>
            <li>
            <a href="#">Sous-Menu 4.1</a></li>
            <li>
            <a href="#">Sous-Menu 4.2</a></li>

            <li>
            <a href="#">Sous-Menu 4.3</a></li>
          </ul>
        </dd>
      </dl> 
    </div>
  </body>
</html>

RAD

Réponse 3 / 5

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

en voilà un autre sans JavaScript mais qui ne fonctionne pas sous IE6 (juste pour la technique).

ou avec JS comme RadZone et des explications en plus.

Réponse 4 / 5

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

attention il faut un hack pour IE6 sur ton menu
Dalida !! ;-))

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

re,

ba vi mais comme j'ai posté avant d'avoir fini d'écrire (une de mes grandes spécialités !), tu n'as pas pu lire la fin…

j'ai aussi mis celui d'AlsaCréations à titre pédagogique !

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

lool oui j ai vus que le message avait changer apres :-))

Discussions similaires

accéder au menu caché

menu caché

Comment activer le Bluetooth sur une TV Samsung ?

Mon PC marque press the esc key for startup menu

Déblocage du mode hôtel Philips 20HF5234/10

Menu

5 réponses

Votre réponse

Discussions similaires