ul列表中具有CSS样式的单级下拉菜单可能吗？

Question

I have a list of items of which only the first is visible and on list hover shows all items with side effect of changing the position of surrounding content . How to evade this unwanted effect?

Here is an example list: http://jsfiddle.net/dsbonev/z8Sjy/

All examples that I checked for styling menus have a two-level structure (parent -> children). On parent hover children are shown. But I don't have a parent to hover onto nor I want to promote one of the children as a parent by moving it out of the list and thus breaking the semantic of the markup.

Answer 1

Figured it out! This is what I wanted:

http://jsfiddle.net/z8Sjy/

I accept comments with shortcomings or improvements of this method.

<div class="list-wrapper">
    <ul class="items">
        <li>stackoverflow</li>
        <li>superuser</li>
        <li>serverfault</li>
    </ul>
</div>

.list-wrapper, .items {
    display: inline-block;
}

.list-wrapper {
    position: relative;
    background-color: blue;
    height: 1em;
}

.items {
    position: absolute;
    background-color: red;
}

.items > li:not(:first-child) {
    display: none;
}

.items:hover > li:not(:first-child) {
    display: block;
}

Answer 2

Instead of using display: none & display: block use visibility: hidden & visibility: visible . That way they take up the space in the HTML document, but are not shown:

Edit

The following CSS would be more cross-browser compatable for showing / hiding "not first-child" elements as the selector :not is actually CSS3.

.items > li:first-child ~ li {
    display: none;
}

.items:hover > li:first-child ~ li {
    display: block;
}

Answer 3

You could position the list absolutely and then add padding to the paragraph to compensate.

http://jsfiddle.net/z8Sjy/2/