Отдельный css для каждого li

[qazibum]

Есть вот такое меню

<div class="menu">
<ul id="level">
<li><a href="http://" class="level" >...</a></li>
<li><a href="http://" class="level" >...</a></li>
<li><a href="http://" class="level" >...</a></li>
<li><a href="http://" class="level" >...</a></li>
</ul>
</div>

Использую border-radius и box-shadow для пунктов.

Каждый пункт - отдельный овал с тенью. Названия пунктов разные по длине, соответственно овалы получаются разные.

А вот для ie как всегда отдельный сss. Другие элементы я просто картинками сделал вместо css3, а вот как с разными по длине пунктами меню быть не знаю. Нужно для каждого li свой css.

Подскажите какие варианты есть?

Жалко нельзя вот такой css сделать

.menu ul#level li {...}

.menu ul#level li li {.....}

[swetlana]

можно сделать так:

.menu ul#level li + li {.....}

http://htmlbook.ru/samcss/sosednie-selektory

[qazibum]

  On 4/25/2011 at 5:16 PM, swetlana said:

можно сделать так:

.menu ul#level li + li {.....}

http://htmlbook.ru/samcss/sosednie-selektory

Спасибо.

[psywalker]

Извращенцы)

[Serlutin]

Вариант 1, уже предложенный. li+li, но он как-то плохо выглядит

Вариант 2, каждой li прописать свой класс. По сути это практически тот же первый вариант, только работает на долю миллисекунды быстрее.

Вариант 3, сделать картинку по принципу "скользящих дверей". То есть одно большое изображение с началом овала и его огромным продложением, вешаем на <a>, задав ему display: block. Второе изображение с окончанием овала добавляем <li>.

Edited April 25, 2011 by Serlutin

[sigma77]

Ну, в зависимости от полноты поддержки браузеров, есть и четвертый вариант - :nth-child()

[Great Rash]

А не проще сделать меню тянущимся? Принцип раздвижных дверей, не? На худой конец привести все пункты меню к одинаковой ширине?