горизоньальное меню на ul

[panda]

как из этого

сделать меню на ul li?

<ul id="nav">
   <li><a href="#">Раз</a></li>
   <li class="active"><a href="#">Два</a></li>
   <li><a href="#">Три</a></li>
   <li><a href="#">Четыре</a></li>
</ul>

требования:

рассредотачивание пунктов по ширине страницы

фон из желтых картинок появляется только когда :hover или при .active

делаю через before и afrer, не могу сопоставить картинки по вертикали(

получается только с точными значениями типа 12px, но если изменить размер шрифта, то картинки опять сбиваются кто вверх кто вниз.

это должно быть не сложно! не могу найти решение.

помогите, пожалуйста....

[wildhind]

хорошо.

Рассказывайте, как думали, какие варианты уже рассмотрели, какие собственные мысли приходят в голову при взгляде на условие задачи.

[panda]

вот мой вариант http://jsfiddle.net/ZJ4YY/2/

[wwt]

http://jsfiddle.net/4sJYM/10/ как то так, возможны баги потести. Edited August 10, 2012 by wwt

[panda]

http://jsfiddle.net/4sJYM/10/ как то так, возможны баги потести.

афигеть....респект! то, что нужно! Спсибо большущее!!!

а как насчет кроссбраузерности? ие6 идут лесом, а остальные как?

[wwt]

http://jsfiddle.net/4sJYM/10/ как то так, возможны баги потести.

афигеть....респект! то, что нужно! Спсибо большущее!!!

а как насчет кроссбраузерности? ие6 идут лесом, а остальные как?

ff, chrome последних версий покажут как надо

ie8-9 тоже

ie7 покажет все кроме before/after (то есть не будет закругленных частей их тупо обрежет)

если нужна кроссбраузерность для мамонтов, лучше это меню сверстать блоками заменив li a :before : after на блочный вариант или табличный

Edited August 10, 2012 by wwt