Как сделать css меню с выводом картинок ?

Question

[Andrey_nk]

Необходимо реализовать меню, чтобы рядом в определённой области выводилась картинка. В зависимости от ссылки выводилась разная картинка при наведении на неё курсора мышки.

Вот так:


Я нашел Вариант как это можно сделать, но не знаю как прописать дефолтное значение, которое будет выводиться если не наводят на кнопку. Подскажите как это лучше реализовать.

Посмотреть как работает можно здесь spirulina-pacifica.ru/menu

#menu2 ul {
	float: left;
  list-style: none;
}

#menu2 ul li {
	display:inline;
	float: left;
}

#menu2 li a  {
    font-size: 24px;
    padding: 10px 0;
    display:block;
    height:31px;
    margin-right:15px;
}

#menu2 li a:hover {
	
	color:#58bee2;
}

#menu2 a .icon {

	display:none;
}

#menu2 a:hover .icon {
	display:block;
	position:absolute;
	height:269px;
	top:0px;
	left:250px;
}

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/tdAbu

Answer 2

[rhost]

fiddle.jshell.net/LZBeN если я правильно понял

Answer 3

[Andrey_nk]

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

Comments

[Юрий Лобанов]

Простите, но почему Вы свой ответ отметили решением? Посмотрите мой пример, все как Вы хотели.

[Andrey_nk]

:) прошу прощение, случайно получилось (вроде бы поправил сразу), благодарю за Ваш ответ!