Html 悬停时停止导航俯仰移动

我正在wordpress中创建导航，当鼠标悬停在菜单上以显示下拉菜单时出现问题。

小提琴就是一个活生生的例子，当悬停在1号、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>

谢谢

将此添加到css中：

.mainNavi li{
    width:150px;
}

JsFiddle：