html - 水平控制列表项的位置

Question

我有一个<ul>项目，悬停时会变大（带有动画）。现在我已经让它们位于屏幕的右侧（使用 CSSright:0em作为<li>类），并且我已经将<li>on hove 的位置设置为固定，这样只有它会随着它的增长而向左移动，并且所有的对象在将停留在右边。问题是，因此，当我将鼠标悬停在它上面时，下一个项目会在它“下方”。我该如何改变呢？（也许有办法只控制<li>悬停时的水平位置属性？）

代码：

http://jsfiddle.net/KBprd/2/

Answer 1

没有任何代码来启动它有点难以帮助。但根据我收集到的信息，您希望所有项目都与菜单右侧齐平；只有“悬停”的元素从容器的右侧移开。我已经拍了一个如何做到这一点的例子。如果这不是您想要的，请在评论中提供更多代码或详细信息，我们可以从那里开始......

这是更新的小提琴

CSS：

.navigation{
    position:fixed;
    z-index:1;
    top:3em;
    right:0em;

}
.navigation li.slide{
    color:#000000;
    display:block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:light;
    background:#00C9FF;
    -webkit-transition: all .2s ease-in-out;
    text-align:right;
    width:53px;
    float:right;

}
.navigation li:hover,.active{
    font-size:25px;
    cursor:pointer;
    width:100px!important;
    background:#5C0CE8;
}
.navigationClear {
    clear:both;
    height:1px;
     margin-bottom:-1px;  
}​

HTML：

<ul class="navigation">
        <li data-slide="1" class="slide">Slide 1</li>
        <li class="navigationClear"></li>
        <li data-slide="2" class="slide">Slide 2</li>
        <li class="navigationClear"></li>
        <li data-slide="3" class="slide">Slide 3</li>
        <li class="navigationClear"></li>
        <li data-slide="4" class="slide">Slide 4</li>
        <li class="navigationClear"></li>
</ul>​

Answer 2

您的悬停元素隐藏下面元素的原因是因为您已将“位置：固定”赋予悬停元素。我通过给 ul 元素一个宽度来解决您的问题，以便 li 元素不会排列。我还删除了悬停元素的固定位置。然后右浮动里。这样你也不需要在每个元素之后加上“clearNavigation”。

这是你的小提琴代码。

<ul class="navigation">
    <li data-slide="1">Slide 1</li>
    <li data-slide="2">Slide 2</li>
    <li data-slide="3">Slide 3</li>
    <li data-slide="4">Slide 4</li>

​</p>

.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
width:53px;
} 

.navigation li{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
position:relative;
right:0em;
float:right;
}

.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
right:0em;
}