Возможно ли одноуровневое выпадающее меню из списка ul в стиле css?

Question

У меня есть список элементов, из которых виден только первый, и при наведении списка отображаются все элементы с побочным эффектом изменения положения окружающего контента . Как избежать этого нежелательного эффекта?

Вот пример списка: http://jsfiddle.net/dsbonev/z8Sjy/

Все примеры, которые я проверял для меню стилей, имеют двухуровневую структуру (parent -> children). На родительском висении показаны дети. Но у меня нет родителя, на которого нужно навести курсор, и я не хочу рекламировать одного из детей как родителя, удаляя его из списка и тем самым нарушая семантику разметки.

Answer 1

Разобрался!Вот что я хотел:

http://jsfiddle.net/z8Sjy/

Я принимаю комментарии с недостатками или улучшениями этого метода.*

CSS

.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

Вы можете расположить список абсолютно, а затем добавить дополнение к абзацу для компенсации.

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

Answer 3

Вместо использования display: none & display: block используйте visibility: hidden & visibility: visible. Таким образом, они занимают место в документе HTML, но не отображаются:

Рабочий пример: http://jsfiddle.net/z8Sjy/3/

Редактировать

Следующий CSS будет более совместимым с браузером для показа / сокрытия элементов "not first-child" , поскольку селектор :not на самом деле CSS3.

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

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