Подскажите как лучше реализовать меню

[cmndr_alexgreen]

В средней секции сайта есть бокс, в котором должно находиться меню такого вида:

скрин

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

Изначально планировал сделать это на списке, но в данный момент задумался о js. Чем проще и надежнее реализовать данную задачу?

Edited November 24, 2012 by cmndr_alexgreen

[hypnocolor]

Зачем яваскрипт? Поиграйтесь с z-index элементов при наведении на них курсора, только и всего.

[Vadimka]

через z-index как тебе сказали уже. изначально этим 5 блокам ставишь z-index от 1 до 5, а так же добавляешь в стиле div:hover {z-index: 8;} и при наведение на блок он получит максимальный z-indexи будет поверх всех.

[cmndr_alexgreen]

Допустим если использовать css и z-index:

чем лучше(работоспособнее), реализовать размещение таких блоков? Отдельными дивами с абсолютным позиционированием или можно пункты списка накинуть друг на друга? (Если можно краткий пример для наглядности)

Edited November 24, 2012 by cmndr_alexgreen

[hypnocolor]

Да как угодно.

http://jsfiddle.net/hypnocolor/SMZzE/

[Vadimka]

ну если это меню будет то списком лучше у которого li блочными будут

[Николя223]

vadimka, мотивируй =)

мысль пришла из таких окошек можно галерею неплохую сделать на канвасах

[cmndr_alexgreen]

Да как угодно.

http://jsfiddle.net/hypnocolor/SMZzE/

Спасибо. Попробую ваш аналог реализовать под свои реалии)).

[cmndr_alexgreen]

Подскажите как корректнее оформить CSS, при следующих условиях:

html

	<div class="wrap_box">

					<ul id="slide">
						<li class="pic1"><a href="#">1</a></li>
						<li class="pic2"><a href="#">2</a></li>
						<li class="pic3"><a href="#">3</a></li>
						<li class="pic4"><a href="#">4</a></li>
					</ul>
	</div>

CSS

#slide {

width: 980px;
height: 320px;
padding-top: 20px;
}


#slide > li {}

что-то типа: (#slide > li .pic1)

Как мне расписать параметр каждой ячейки со своим классом, дабы обойтись без li+li+li, поскольку когда я вживляю в свой код пример приведенный hypnocolor, то видоизменяются все списки на странице.

Вроде такая расстановка параметров работает:

#slide {}
#slide > li {}
li.pic1{}
li.pic2{}
li.pic3{}
li.pic4{}
#slide li:hover{}

Edited November 26, 2012 by cmndr_alexgreen