Menu dynamique

Résumé des étapes à suivre :

code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Project 6</title>

body {

background: #EEE;

color: #000;

behavior: url(csshover.htc);

} /* WinIE behavior call */

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;

}

div#nav ul {

margin: 0;

padding: 0;

width: 7em;

}

div#nav li {

position: relative;

list-style: none;

margin: 0;

}

div#nav li:hover {

background: #ccccff;

}

div#nav li.submenu {

}

div#nav li.submenu:hover {

background-color: #cccccc;

}

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 li.submenu:hover ul {

display: block;

}

</style>

</head>

<body>

<h1>Le pont mirabeau</h1>

<ul>

</li>

<li class="submenu"><a href="/services/">Services</a>

<ul>

<li><a href="/services/strategy/">Strategy</a>

</li>

<li><a href="/services/optimize/">Optimization</a>

</li>

</ul></li>

<li class="submenu"><a href="/pubs/">Publications</a>

<ul>

<li><a href="/pubs/articles/">Articles</a>

</li>

<li><a href="/pubs/tuts/">Tutorials</a>

</li>

</ul></li>

<li><a href="/events/">Events</a>

</li>

<li><a href="/contact/">Contact</a>

</li>

</ul>

</div>

<p>Sous le pont Mirabeau coule la Seine Et nos amours Faut-il

qu'il m'en souvienne La joie venait toujours après la peine Vienne la

nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les

mains restons face à face Tandis que sous Le pont de nos bras passe

Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les

jours s'en vont je demeure L'amour s'en va comme cette eau courante

L'amour s'en va Comme la vie est lente Et comme l'Espérance est

violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure

Passent les jours et passent les semaines Ni temps passait Ni les

amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit

sonne l'heure Les jours s'en vont je demeure "Le Pont Mirabeau"

Apollinaire, Alcools (1912)</p>

</div>

</body>

</html>

Résultat

Code en action

Voici différents menus dynamiques qui reprennent le code pur CSS.

Action