Problème de sous menu CSS3

Bonjour à tous,

Avant d'avoir recours à l'aide communautaire, j'ai bien fait des recherches mais je n'ai trouvé aucune réponse.

Le problème est simple, lors du :hover, les menus situés à proximité du menu en :hover se décale selon la taille du sous menu.
J'espère que je suis clair .

Aussi, j'aimerai palier à ce problème. Il y a-t-il une règle permettant de fixer les menus ?

Voici mon code css et html

.menu ul{
	margin:0;
	padding:0;
	list-style:none;
	height:0;
	overflow: hidden;
	transition:1s;
	-moz-transition:1s;
	-webkit-transition:1s;
}
.menu li:hover ul{
	height:400px;
	padding: 10px;
	margin-top: -4px;
}
.sous_menu
{
	width: 100px;
	background: #1665d2;
	-moz-border-radius: 0 0 10px 0;
	-webkit-border-radius: 0 0 10px 10px;
	border-bottom: solid 1px #0559c1;
	border-left: solid 1px #0559c1;
	border-right: solid 1px #0559c1;
	line-height: 27px;
}
.sous_menu li a
{
	font-size: 15px;
	padding: 0;
	font-family: 'KomikaTextRegular';
	color:#ffffff;
	text-shadow: 1px 0px 1px rgba(255,255,255,0.5);
	filter: dropshadow(color=#000, offx=1, offy=0);
}	

	<nav>
   	<ul class="menu">
       <li><a href="index2.php" class="index"></a></li>
       
       <li><a href="jeux.php" class="jeux"></a>
		    <ul class="sous_menu">
     			<li><a href="#">Jeux 3D <!--<img alt="Jeux 3D" src="design/images/miniature_menu/jeux3d.png" />--></a></li><br />
     			<li><a href="#">Arcade <!--<img alt="Jeux 3D" src="design/images/miniature_menu/arcade.png" />--></a></li><br />
     			<li><a href="#">Action <!--<img alt="Jeux 3D" src="design/images/miniature_menu/aventure.png" />--></a></li><br />
               <li><a href="#">Aventure</a></li><br />
                <li><a href="#">Combat</a></li><br />
                <li><a href="#">Enfant</a></li><br />
               <li><a href="#">Fêtes</a></li><br />
               <li><a href="#">Fille</a></li><br />
               <li><a href="#">Inclassable</a></li><br />
               <li><a href="#">Plate-Forme</a></li><br />
                <li><a href="#">Réfléxion</a></li><br />
               <li><a href="#">Simulation</a></li><br />
                <li><a href="#">Stratégie</a></li><br />
               <li><a href="#">Sport</a></li><br />
                <li><a href="#">Gore</a></li><br />
                
   		</ul>
        </li>
        
        <li><a href="animations.php" class="animations"></a></li>
        <li><a href="rechercher.php" class="rechercher"></a></li>
      </ul>

Menu normal :
http://img15.hostingpics.net/pics/529644problme.jpg



Menu au passage de la souris :
http://img15.hostingpics.net/pics/526730probleme.jpg



Voilà, vous pouvez voir un décalage.

Merci d'avance à celui ou ceux qui sauront éclairer ma lanterne.

bonjour, pour éviter ce genre de problème, il faut sortir le sous-menu du flux. Avec notamment un position absolute.

Voici un exemple simple à adapter:

.menu ul {
  position: relative;
  height: 25px;
}
.menu ul ul {
  position: absolute;
  top: 25px;
  left: 0;
}