Bonjour ,

Je viens vers vous pour une aide, j'ai beau cherché mais je bloque.
Je vous explique et mets ensuite le code à disposition.
Lorsque je survole le menu je voudrais que le menu se redimensionne uniquement vers le haut et que le bas du menu(bottom) ne bouge pas.

j'ai donc fais ceci :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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" lang="fr" xml:lang="fr">
  <head>
    <title>Menu</title>
    <style type="text/css">
    body{
			background #f3f3f3;
		}
		ul{
			margin: 300px 0 0 0;
			padding: 0;
			position: relative;
		}
 
		li{
			width: 150px;
			float: left;
			color: #191919;
		}
		li.test{
			position: relative;
			top: 0;
			bottom: 0;
			height: 50px;
			overflow: hidden;
			border: solid;
			margin: 0 0 0 10px;
		}
		li ul{
			margin: 0;
		}
    </style>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(document).ready(function(){
 
			//When mouse rolls over
			$("li.test").mouseover(function(){
				$(this).stop().animate({height:'250px',top:'-50px',bottom:'0'},{queue:false, duration:600})
			});
 
			//When mouse is removed
			$("li.test").mouseout(function(){
				$(this).stop().animate({height:'50px',top:'0',bottom:'0'},{queue:false, duration:600})
			});
 
		});
		</script>
  </head>
  <body>
		<ul>
			<li class="test">
				<h3>A voir / A faire</h3>
				<div><ul>
						<li><a href="">Les incontournables</a></li>
						<li><a href="">Sorties/ Ev&egrave;nements</a></li>
						<li><a href="">Shopping</a></li>
						<li><a href="">Culture/Patrimoine</a></li>
				</ul></div>
			</li>
			<li class="test">
				<h3>Organiser son voyage</h3>
				<div><ul>
						<li><a href="">Les incontournables</a></li>
						<li><a href="">Sorties/ Ev&egrave;nements</a></li>
						<li><a href="">Shopping</a></li>
						<li><a href="">Culture/Patrimoine</a></li>
				</ul></div>
			</li>
		 </ul>
  </body>
</html>
comme vous pouvez le voir; lorsque vous survolez le menu , il s'étire vers le haut et en même temps vers le bas.
Comment fairre pour qu'il s'étire uniquement vers le haut.
j'ai joué sur le heigt, bottom et top mais rien n'y fait.
Quelqu'un a une solution

Merci déjà de 'avoir lu