Списъкът с падащо в CSS

Така че, нека не се спори дълго, отиваме направо на въпроса

Аз съзнателно да пропусне общи елементи, като например свързването на стилове, така че кодът не набъбва. В долната част на страницата, давам линк към сорс кода - всичко е там.
Това, което имаме в HTML - обичайните списъка и необичайно заглавие. Уникалността му е, че тя е направена препратка, която ви позволява да следите събитието: висене. т.е. ориентиране. падащия списък ще работи, когато курсорът е върху глава.

Това е нищо специално, посочените размери и стил на блок, стил и собственост върху двата компонента - стиловете им се носят. Давай:

Този код вече е по-интересно и показва поведението на падащия списък на мястото на курсора. В нормално състояние трябва да показва: няма, което означава, че не се показва. Застанал - тя показва по единици. Това е цялата тайна. Сега малко организира елементи в списък и поставете икони:

Това е всичко. падащия списък е готов и изглежда доста добре. Можете да подредите елементите в свое усмотрение, да добавяте заоблени ъгли и други "джаджи".

Ако искате в списъка на "припокриване" текста по-долу, когато задържите - поглед в посока на Z-индекс.

Подобни записи

Добре, сега е подготовката на друга статия - за сряда, четвъртък чакат в списъка

Кажи ми, как да се направи този списък бе разкрито чрез кликване, а не когато се движите?

Да, това би било много полезно

Тогава да, съгласен съм. Що се отнася до IE6 - Спомням си любов към него Какво мога да кажа - аз не го харесвам, аз често се сблъскват с него на основната работа. Въпреки, че ние не можем да се отпишат glyuchnost клиенти провинциална банка

Интересното е полезно. Само: мишката за връзки и за DIV тя ​​ще се реализира само специални модерни браузъри. droplink: мишката
Така е и различни браузъри няма да работи ...