Menu

by Alexander Yankovoy

HTML

<ul class="menu"><li class="menu-item-simple-parent">
<a href="services-and-prices/" class="overline" data-hover="Услуги&nbsp;и&nbsp;цены">Услуги&nbsp;и&nbsp;цены</a><ul class=""><li class="menu-item-simple-parent">
<a href="services-and-prices/layout-site/" class="overline" data-hover="верстка сайтов">верстка сайтов</a>
</li><li class="menu-item-simple-parent">
<a href="services-and-prices/design-site/" class="overline" data-hover="дизайн для сайта">дизайн для сайта</a>
</li><li class="menu-item-simple-parent">
<a href="services-and-prices/programmirovanie-i-integracziya-v-cms-dvizhki/" class="overline" data-hover="программирование">программирование</a>
</li><li class="menu-item-simple-parent">
<a href="services-and-prices/correct-errors-site/" class="overline" data-hover="исправление ошибок">исправление ошибок</a>
</li><li class="menu-item-simple-parent">
<a href="services-and-prices/support-administration/" class="overline" data-hover="поддержка и администрирование">поддержка и администрирование</a>
</li></ul>
</li><li class="menu-item-simple-parent">
<a href="portfolio/" class="overline" data-hover="Портфолио">Портфолио</a>
</li><li class="menu-item-simple-parent">
<a href="about-us/" class="overline" data-hover="О&nbsp;нас">О&nbsp;нас</a>
</li><li class="menu-item-simple-parent">
<a href="news/" class="overline" data-hover="Новости">Новости</a>
</li><li class="menu-item-simple-parent">
<a href="otzyivyi-klientov/" class="overline" data-hover="Отзывы">Отзывы</a>
</li><li class="menu-item-simple-parent">
<a href="contacts/" class="overline" data-hover="Контакты">Контакты</a>
</li></ul>

CSS

.menu {
    width: 50%;
}
.menu li {
    position: relative;
}
li ul li {
    display:none;
}
li.hover li {
    display:block;
}
li ul:before {
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

JavaScript

$("ul").click(function(){
	$(this).parent().toggleClass("hover");
});