Створення випадають елементів
Випадаючі елементи спочатку не видно на сторінці, вони мають властивість display: none. Пізніше none змінюється на block або inline-block. Це відбувається при натисканні на один з пунктів меню або під час наведення мишки. Для створення цього ефекту і пов’язаних анімаційних переходів, використовується CSS.
Має виглядати приблизно так:
#menu ul li {
position:absolute;
display: none;
}
#menu li:hover ul {
display:inline-block;
}
Слід звернути увагу на атрибут position, з допомогою якого встановлюється позиціонування елемента. Блок div при заданому значенні absolute відображається над іншими блоками. А відлік координат починається від лівого верхнього краю батьківського елементу. В цьому разі батьком вважається document. Це треба змінити і зробити батьком #menu, задати position: relative. Тепер у #menu ul потрібно вказати координати left і top, щоб випадаючий список з’являвся прямо під основним пунктом і не перекривав його.
Якщо поруч знаходиться кілька абсолютних блоків, треба використовувати властивість z-index. При розгляді двох дівов з абсолютним позиціонуванням, коли один знаходиться поверх іншого, z-index першого повинен мати значення вище, ніж у другого.
