Так как меня что-то сегодня укусило по видимому, или я не с той ноги встал, чтобы закидывать сюда на раздачу различные украшения )) Предлагаю также анимированные списки, кому вдруг понадобится при украшении своего сайта Картинку вы уже видели, а теперь посмотрите демо и проводя мышкой по спискам не забудьте смотреть на цифры
Так как к сожалению,бываю тут не так часто как хотелось, если вдруг у кого возникнут вопросы, то ссылка стоит в подписи ...
Всем добра!!!
HTML
Код
<ol class="my-list">
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a>
<ol>
<li><a href="">Подэлемент списка</a></li>
<li><a href="">Подэлемент списка</a></li>
<li><a href="">Подэлемент списка</a></li>
</ol>
</li>
<li><a href="">Элемент списка</a></li>
<li><a href="">Элемент списка</a></li>
</ol>
CSS
Код
ol{counter-reset:li;list-style:none;*list-style:decimal;font:15px 'trebuchet MS','lucida sans';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5)}
ol ol{margin:0 0 0 2em}
.my-list a{position:relative;display:block;padding:.4em .4em .4em 2em;*padding:.4em;margin:.5em 0;background:#ddd;color:#444;text-decoration:none;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease- out;transition:all .3s ease-out}
.my-list a:hover{background:#eee}
.my-list a:hover:before{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
.my-list a:before{content:counter(li);counter-increment:li;position:absolute;left:-1.3em;top:50%;margin-top:- 1.3em;background:#87ceeb;height:2em;width:2em;line-height:2em;border:.3em solid #fff;text-align:center;font-weight:700;-moz-border-radius:2em;-webkit-border-radius:2em;border-radius:2em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease- out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}