11550 sujets

JavaScript, DOM et API Web HTML5

hello,

Après avoir, vainement, cherché dans les sujets déjà existants, je poste ici, en espérant que les visiteurs du dimanche (ceux de la semaine sont aussi les bienvenus) pourront m'aider.

Je "travaille" actuellement sur la mise en page d'un site perso et je bloque sur un probleme lié au menu dynamique.
Il y a une barre de navigation, tout ce qu'il y a de plus banale et au survol d'un élément, un sous-menu s'affiche grâce à du javascript (display:block)

Le code HTML

<div id="conteneur">
<div id="nav">
	<ul id="menu">
		<li><a href="#" onmouseover="montre();">section 1</a></li>
		<li><a href="#" onmouseover="montre('sousMenu1');">section 2</a>
			<ul id="sousMenu1" class="sousMenu">
				<li><a href="#">élément du sous menu</a></li>
				<li><a href="#">élément du sous menu</a></li>
			</ul>
		</li>
	</ul>
</div>

<div id="colonne">
<p>petit blabla, menu etc...</p>
</div>

<div id="contenu">
<h2>un titre</h2>
<p>le gros blablabla</p>
</div>

</div>


Et le CSS

#menu {
margin: 0;
padding: 0;
width: 550px;
}

#menu li {
float: left;
}

#menu a {
display: block;
margin: 0 4px;
padding 1px 0 1px 0;
width: 100px;
}

.sousMenu {
display: none;
margin: 0;
padding: 0;
}

.sousMenu li {
float: none;
}

.sousMenu a {
margin: 1px 5px 1px 5px;
padding 1px 0 1px 0;
width: 99px;
}

#colonne {
float: right;
position: relative;
width: 150px;
}

#contenu {
margin-right: 150px;
position: relative;
}


Le probleme, enfin, les problemes sont les suivants :
- au survol de la barre de navigation, quand le sous-menu s'affiche, il pousse le reste de la page, au lieu de s'afficher "par dessus".
- et il est impossible de cliquer sur les liens du sous-menu qui "débordent" (qui empietent sur le "contenu")

mieux que des mots, l'exemple en action : http://aterla.e-supinfo.net

merci d'avance
Modifié par yoh (31 Jul 2005 - 19:28)
ah oui, je n'y avais pas pensé (je ne sais pas pourquoi mais je m'obstinais à modifier les propriétés du menu et pas du sous-menu... Smiley confused ) ! Merci Smiley biggrin
Pour le 2nd problème, pareil Smiley lol il suffisait de modifier z-index.
en tout cas merci.