变化宽度浮动权

Question

#mainMenu { 
 
    float: right; 
 
    margin-top: 70px; 
 
    padding: 0; 
 
    list-style: none; 
 
    // position: relative; 
 

 
} 
 
#mainMenu li { 
 
    box-sizing: border-box; 
 
    width: 250px; 
 
    height: 70px; 
 
    background-color: rgba(0, 168, 107, 1); 
 
    border: rgba(76, 76, 76, 0.2) 1px solid; 
 
} 
 
#mainMenu li:hover { 
 
    background-color: rgb(2, 100, 59); 
 
    margin-right: 50px; 
 
}

<ul id="mainMenu"> 
 
    <li value="1"></li> 
 
    <li val="2"></li> 
 
    <li val="3"></li> 
 
    <li val="4"></li> 
 
    <li val="5"></li> 
 
    <li val="6"></li> 
 
</ul>

正如你所看到的，我希望菜单项来获取悬停宽，确实如此，但问题是它得到更广泛的右侧和所有其他菜单项移​​动到左侧。我只想让悬挂的物品变宽，向其他人停留时向左移动。

我可能会尝试用JavaScript稍后为慢动作开启做到这一点。 现在我试图让css悬停，因为它的测试速度更快。

Answer 1

看到现场演示http://jsfiddle.net/d4zow6px/

该做的工作，

#mainMenu li:hover{ 
    background-color: rgb(2,100,59); 
    width: 300px; 
    margin-left: -50px; 
}