Bonsoir,
je suis en train de me casser les dents sur un menu déroulant.
Je me suis mis en tête de faire au plus simple, parce que je ne vouler pas reprendre les idées des tutos, je voulais me creuser un peu la cervelle et le faire a ma façon.
Pour le coups c'est réussi je me creuse la cervelle...
Alors voilà l'idée c'est d'avoir un menu horizontal, qui affiche le déroulement a la vertical, bref classique.
le problème c'est que les listes "menu" doivent être alignés les une par rapport aux autres, c'est pour ça que j'ai mis un float:left sur menu li.
seulement les liste du sous-menu prennent aussi le plis et je ne sais pas comment faire... en plus je m'embrouille a force de bloquer sur ce problème.
Avez vous une idée ?
test : http://www.thewinterdesign.com/depot/Sans%20titre2.htm
je suis en train de me casser les dents sur un menu déroulant.
Je me suis mis en tête de faire au plus simple, parce que je ne vouler pas reprendre les idées des tutos, je voulais me creuser un peu la cervelle et le faire a ma façon.
Pour le coups c'est réussi je me creuse la cervelle...
Alors voilà l'idée c'est d'avoir un menu horizontal, qui affiche le déroulement a la vertical, bref classique.
le problème c'est que les listes "menu" doivent être alignés les une par rapport aux autres, c'est pour ça que j'ai mis un float:left sur menu li.
seulement les liste du sous-menu prennent aussi le plis et je ne sais pas comment faire... en plus je m'embrouille a force de bloquer sur ce problème.
Avez vous une idée ?
test : http://www.thewinterdesign.com/depot/Sans%20titre2.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
#menu, #sousmenu, #sousmenu1 {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
}
#sousmenu, #sousmenu1 {
display: none;
}
#soumenu li {
}
#menu a {
display: block;
width: 120px;
background: #ccc;
}
</style>
<script type="text/javascript">
function show(cible,cible1)
{
if(document.getElementById)
document.getElementById(cible).style.display = 'block';
document.getElementById(cible1).style.display = 'none';
}
</script>
</head>
<body>
<ul id="menu">
<li><a href="#" onmouseover="show('sousmenu','sousmenu1')">Menu1</a></li>
<ul id="sousmenu">
<li><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
</ul>
<li><a href="#" onmouseover="show('sousmenu1','sousmenu')">Menu1</a></li>
<ul id="sousmenu1">
<li><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
</ul>
</ul>
</body>
</html>
