更改向右浮动的垂直菜单项的宽度
change width of vertical menu item that is floated right
#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 悬停,因为它的测试速度更快。
观看现场演示http://jsfiddle.net/d4zow6px/
这完成了工作,
#mainMenu li:hover{
background-color: rgb(2,100,59);
width: 300px;
margin-left: -50px;
}
#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 悬停,因为它的测试速度更快。
观看现场演示http://jsfiddle.net/d4zow6px/
这完成了工作,
#mainMenu li:hover{
background-color: rgb(2,100,59);
width: 300px;
margin-left: -50px;
}