Question

(jsFiddle example)

I have a <ul> with its <li>s aligned to the right. I’d like them to be positioned such that only about 20px of the element is showing on the right side of the <ul>, and on hover they go to their normal positions. This will be combined with overflow: hidden; on the container so the elements are partially hidden to begin with and slide in from the side (with CSS3 transitions).

In this jsFiddle example (overflow: visible for illustration) I was able to slide the elements in to the right position, but how do I align them such that they lie with 20px inside their container to start with? The best I could do was keep them right-aligned and push them all the way outside their container.

I played with changing the elements’ widths, but if they contain multiple words the text wraps and the height changes (or with overflow: hidden the words just disappear when the width is too small), which is unacceptable.

It’s acceptable (but less interesting and less preferable) to use fixed-width <li>s, if necessary, but I’d like to see other solutions.

Answer 1

If the UL itself has a fixed width, you could position the LI’s ({UL_width} – 20) pixels from the left of the UL. I would probably do something like…

<ul>
    <li><span>Item #1</span></li>
    <li><span>Item #2</span></li>
</ul>
...

The following CSS should give you the desired effect…

ul { width: 200px; }
ul li {
    position: relative;
    height: 15px;
    overflow: hidden;
}
ul li span {
    position: absolute;
    top: 0;
    left: 180px;
}

Something along those lines should do the trick. Then just do a rollover to adjust your left property of the ul li span.

NEW CSS

ul { width: 200px; }
ul li {
    width: 200px;
    text-indent: 180px;
    height: 15px;
    overflow: hidden;
}