Остановить Nav divs от перемещения при зависании

Question

Я создаю навигацию (в Wordpress), и у меня возникают проблемы при наведении курсора на меню, чтобы отобразить выпадающее меню. http://jsfiddle.net/ggp9pywy/1/

скрипку живой пример, при наведении курсора на number1, 3 & 4, то дивы двигаться, я хотел бы, чтобы они остались в том же самом месте.

<div class="mainNavi"> 

    <ul id="menu-main-navigation" class="nav navbar-nav navbar-right"><li id="menu- item-156" class="Number1Class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-156"><a href="#">Number1</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-385" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-385"><a href="#">Number1</a> 
    <ul class="sub-menu"> 
     <li id="menu-item-384" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-384"><a href="#">Number 1</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-386"><a href="#">Number2</a> 
    <ul class="sub-menu"> 
     <li id="menu-item-387" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-387"><a href="#">Number 2</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-157"><a href="#">Number3</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388"><a href="#">Number3</a></li> 
    <li id="menu-item-389" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389"><a href="#">Number3</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-158" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-158"><a href="#">Number4</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392"><a href="#">Number4</a></li> 
    <li id="menu-item-391" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-391"><a href="#">Number4</a></li> 
    <li id="menu-item-390" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-390"><a href="#">FAQ&#8217;s</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-262" class="quoteHead menu-item menu-item-type-custom menu-item-object-custom menu-item-262"><a href="#">Get A Quote</a></li> 
    </ul>  </div> 
    </div> 

Спасибо

Answer 1

Добавить это в CSS:

.mainNavi li{ 
    width:150px; 
} 

JsFiddle: Fiddle