Controlling the position of list items horizontally

Question

I have a <ul> of items, who get bigger (with animation) on hover. Now i have made them be on the right side of the screen (using the CSS right:0em for the <li> class), and I have set the position of the <li> on hove to fixed so that only it will move left as it grows, and all the over objects in the will stay to the right. The problem is that as a result of that, when I hover over it, the next item gets "under" it. How can I change that? (maybe is there a way to control only the horizontal position property of the <li> on hover?)

Code:

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

Answer 1

The reason that your hovered element hides the element below is because you have given "position:fixed" to the hovered element. I fixed your problem by giving the ul element a width so that the li elements wont line up. I also removed the fixed position of the hovered element. and then right floated the li. This way you also dont need to put "clearNavigation" after each element.

Here's your fiddle code.

<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>

​

.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;
}

Answer 2

Without any code to start it is kind of hard to help. But based on what I could gather, you are wanting all the items to stay flush against the right side of the menu; only the "hovered" element is moved away from the right-side of the container. I've slapped together an example of how to do this. If this is not what you are looking for, provide some more code or detail in comments and we can go from there...

Here is the updated Fiddle

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>​