[bgraf]

Здравствуйте.
Подскажите как сделать такое меню?
https://javascript.ru/forum/attachme...d=150026117 5

вот есть такой код.

<style>
.side{
	width:200px;
	direction:rtl;
	margin-right:0;
	position:relative;
}

.side ul{
	list-style: none;

}
.menu_services a {
	background-color:#f6f6fa;
	display:block;
	padding:10px;
	border-bottom: 1px solid #e7e7ed;
	transition: 0.5s background-color box-shadow;
	cursor:pointer;
}

.menu_services a:hover{
	background-color:#ffffff;
	border-radius: 5px;
	box-shadow: 0px 0px 45px -7px #e1e1e1;
	color:#0B26F8;
	border-bottom: 0;
}

.menu_services a:after{
	background-color:#ffffff;
	border-radius: 5px;
	box-shadow: 0px 0px 45px -7px #e1e1e1;
	color:#0B26F8;
	border-bottom: 0;
}

.menu_services li:first-child a, .menu_services li .menu__drop li:first-child a{
	border-radius: 5px 5px 0 0;
}

.menu_services li:last-child a, .menu_services li .menu__drop li:last-child a{
	border-radius: 0 0 5px 5px;
	border-bottom: 0;
}

.menu_services li .menu__drop li a{
	border-radius: 0;
	border-bottom: 1px solid #e7e7ed;
}

.menu__list::after{
	

.menu__drop{
	top:-100000px;
	position:absolute;
	width:400px;
	right:100%;
	border-right: 10px solid transparent;
	opacity:0;
	transition: 0.5s opacity;
}

.menu__list:hover .menu__drop{
	top:0;
	opacity:1;
}

</style>

<div style="width:1200px;">
<div class="side">
	<ul class="menu_services">
    	<li class="menu__list text_font text_color_black"><a>Пункт 1</a>
        	<ul class="menu__drop">
            	<li><a class="text_font text_color_black">Под Пункт 1</a></li>
                <li><a class="text_font text_color_black">Под Пункт 2</a></li>
                <li><a class="text_font text_color_black">Под Пункт 3</a></li>
                <li><a class="text_font text_color_black">Под Пункт 4</a></li>
                <li><a class="text_font text_color_black">Под Пункт 5</a></li>
            </ul>
        </li>
        <li class="menu__list text_font text_color_black"><a>Пункт 2</a>
        	<ul class="menu__drop">
            	<li><a class="text_font text_color_black">Под Пункт 1</a></li>
                <li><a class="text_font text_color_black">Под Пункт 2</a></li>
                <li><a class="text_font text_color_black">Под Пункт 3</a></li>
                <li><a class="text_font text_color_black">Под Пункт 4</a></li>
                <li><a class="text_font text_color_black">Под Пункт 5</a></li>
            </ul>
        </li>
        <li class="menu__list text_font text_color_black"><a>Пункт 3</a>
        	<ul class="menu__drop">
            	<li><a class="text_font text_color_black">Под Пункт 1</a></li>
                <li><a class="text_font text_color_black">Под Пункт 2</a></li>
                <li><a class="text_font text_color_black">Под Пункт 3</a></li>
                <li><a class="text_font text_color_black">Под Пункт 4</a></li>
                <li><a class="text_font text_color_black">Под Пункт 5</a></li>
            </ul>
        </li>
        <li class="menu__list text_font text_color_black"><a>Пункт 4</a>
        	<ul class="menu__drop">
            	<li><a class="text_font text_color_black">Под Пункт 1</a></li>
                <li><a class="text_font text_color_black">Под Пункт 2</a></li>
                <li><a class="text_font text_color_black">Под Пункт 3</a></li>
                <li><a class="text_font text_color_black">Под Пункт 4</a></li>
                <li><a class="text_font text_color_black">Под Пункт 5</a></li>
            </ul>
        </li>
        <li class="menu__list text_font text_color_black"><a>Пункт 5</a>
        	<ul class="menu__drop">
            	<li><a class="text_font text_color_black">Под Пункт 1</a></li>
                <li><a class="text_font text_color_black">Под Пункт 2</a></li>
                <li><a class="text_font text_color_black">Под Пункт 3</a></li>
                <li><a class="text_font text_color_black">Под Пункт 4</a></li>
                <li><a class="text_font text_color_black">Под Пункт 5</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

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

И вообще без js только css возможно сделать такое меню
Подскажите пожалуйста.
Всем спасибо