Подскажите как такое можно реализовать

[z005]

Ребята, подскажите как можно сделать вот такое меню списка. Я уже запарился, все что только пришло в голову гуглил.

Пробовал псевдоклассами before after , но понял что это не вариант, потому что активная вкладка выше и с другим бэкраундом. Жду Ваших совет, очень нужно!

[wildhind]

закругления верхних углов ведь не вызывают трудностей, не так ли?

А надвинуть один пункт на другой можно отрицательным маргином.

[z005]

отрицательный марджин даст такой результат: следующий li наедет на предыдущий, а как вы видите по макету, нужно сделать на оборот, что бы li наезжал на следующий (соседний с права li) . Можно сделать float: right скажите Вы, но нет, не катит, потому что li.active как можно заметить первый, после флоата-райт первый станет последним в таком случае.

[Softlink]

Очень, очень лениво писать разметку) Если самостоятельно накатаете html+базовые стили здесь http://jsfiddle.net/, то я добью стилями до результата

[Switch74]

используйте z-index

[SelenIT]

Как решение головоломки, можно сделать как-то так:

li.active, .active ~ li { position: relative; }
li.active { z-index: 12; }
li.active + li { z-index: 11; }
li.active + li + li { z-index: 10; }
... /* и т.д. до максимально возможного числа вкладок после активной */

Вот еще вариант на чистом CSS (можно покликать по вкладкам).

А ответ на сам вопрос — здесь.