Décalation des divs avec un hover

Bonjour à tous,

J'ai suivi une partie de ce tutoriel pour réaliser mon menu horizontal.
J'ai gardé le sous menu en accordéon.

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 :p.

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 :

Menu au passage de la souris :

EDIT : En effet, ce que je craignais arrive, le sous menu, lorsqu'il est déroulé déplace tout ce qui est en dessous (Donc tous les textes etc ...)

Voilà, vous pouvez voir un décalage.

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