在悬停

Question

我正在创建一个导航（在wordpress中），并且在将鼠标悬停在菜单上以显示下拉菜单时遇到问题。 http://jsfiddle.net/ggp9pywy/1/

这个小提琴是一个现实的例子，当它悬停在数字1,3和1之上时4，div移动，我希望他们留在同一个地方。

    <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