Bonjour à vous tous

j'ai un tout petit problème et je sais pas d'où il vient ... alors voilà, j'aimerais avoir un menu vertical sur le bord droit de ma page, dont les onglets se décalent vers la gauche au passage sur l'un deux ... du genre :



*on passe au dessus*



et je sais pas comment faire :/ voilà mon code :

<script type="text/javascript">
	var li = document.getElementsByTagName("li");
	var droite = 0;
	var x = 1;
	var bool = true;
	var interval;
	var inter;

	for(var i = 0; i < li.length; i++)
	{	
		if(li[i].className == "java")
		{
			li[i].onmouseover = function()
			{
				clearInterval(inter);
				interval = setInterval(function()
				{
					if( droite < 30 )
					{
						droite += x;
						li[i].style.paddingRight = droite;
					}
					else
					{
						clearInterval(interval);
					}
				},5);
			};
			
			li[i].onmouseout = function()
			{	
				clearInterval(interval);
				inter = setInterval(function()
				{
					if( droite > 0 )
					{
						droite -= x;
						li[i].style.paddingRight =droite; 
					}
					else
					{
						clearInterval(inter);
					}
				},5);
			};
		}
	}
	
</script>

sur mon menu :

<div id="menu">
	<ul>
		<li class="java"><a href="">Accueil</a></li>
		<li class="java"><a href="">News</a></li>
		<li class="java"><a href="">Répertoire</a></li>
		<li class="java"><a href="">Devoirs</a></li>
		<li class="java"><a href="">DM</a></li>
		<li class="java"><a href="">Contact</a></li>
	</ul>
</div>

avec le CSS :

body
{
	margin: 0;
	padding: 0;
}

#image
{
	background-color: #0778a3; 
	width: 100%;
	height: 300px;
}

#menu
{
	float: right;
	margin-top: -320px;
}

#menu ul
{
	list-style-type: none;
	padding-right: 2px;
}

#menu li
{
	height: 40px;
	width: 200px;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid white;
	padding-top: 10px;
}

#menu li.droite
{
}

#menu a
{
	color: white;
	text-decoration: none;
}

#menu a:hover
{
}

je sais que ça fait beaucoup de lecture, mais j'ai vraiment besoin d'un coup de main merci !

Salut,

Essaie avec

li[i].style.paddingRight = droite+"px";

Sinon le reste du code me parait correct.

salut

Non ça marche toujours pas

désolé du UP, mais toujours aucune réponse ?

Salut,

il faut que ton élément soit en position:absolute et que tu joues sur la valeur de la propriété element.style.left

Je te laisse faire quelques recherches

salut

merci mais le padding marche pas ? ou bien c'est à cause des classes ?

Edit:

C'était pas le li à modifier mais le lien merci à vous tous en tout cas

T'as rien au niveau de la console d'erreurs JS?

J'ai pas de console mais j'ai modifié mon message du dessus, regarde merci à toi en tout cas