// Megamenu Script
$(document).ready(function() {

	"use strict";
	$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
	$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
	$(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Категории<i class=\"fa fa-bars pull-right\"></i></a>");

	$(".menu > ul > li").hover(function(e) {
		if ($(window).width() > 768) {
			$(this).children("ul").stop(true, false).fadeToggle(150);
			e.preventDefault();
		}
	});

	$(".menu > ul > li").click(function() {
		if ($(window).width() <= 768) {
			$(this).children("ul").fadeToggle(150);
		}
	});

	$(".menu-mobile").click(function(e) {
		$(".menu > ul").toggleClass('show-on-mobile');

		if ($(".menu > ul").is(':visible')) {
			$(".menu > ul").slideUp();
		}

		else {
			$(".menu > ul").slideDown();
		}

		e.preventDefault();
	});

});

.menu-container {
	width: 80%;
	margin: 0 auto;
	background: #e9e9e9;
}

.menu-mobile {
	display: none;
	font-size: 20px;
	padding: 10px 15px;

	i { font-size: 26px }
}

.menu-dropdown-icon {
	&:before {
		position: absolute;
		right: 0;
		content: "\f0d7";
		font-family: 'fontawesome';
		display: none;
		cursor: pointer;
		padding: 1.5em 2em;
		background: #fff;
		color: #333;
	}
}

.menu {
	> ul {
		margin: 0 auto;
		width: 100%;
		list-style: none;
		padding: 0;
		position: relative;
		box-sizing: border-box;

		&:before,
		&:after {
			content: "";
			display: table;
		}
		&:after { clear: both }

		> li {
			float: left;
			position: initial;

			> ul {
				display: none;
				width: 100%;
				background: #f7f7f7;
				padding: 0 20px 5px;
				position: absolute;
				z-index: 99;
				left: 0;
				margin: 0;
				list-style: none;
				box-sizing: border-box;
				border-left: 1px solid @brand-border-color;
				border-right: 1px solid @brand-border-color;
				border-bottom: 1px solid @brand-border-color;

				&:before,
				&:after {
					content: "";
					display: table;
				}
				&:after { clear: both }

				> li {
					margin: 0;
					padding-bottom: 0;
					list-style: none;
					width: 20%;
					background: none;
					float: left;

					p {
                        font-size: 13px;
						margin-top: 15px;
						position: relative;

						&:after {
							.transition;
							position: absolute;
							content: "";
							height: 2px;
							width: 60%;
							left: 20%;
							top: 24px;
							transform: scaleX(0);
							background: @brand-yellow;
						}
					}

					img {
                        .transition;
                        margin: 0 auto;
                    }

					a {
						color: #000;
						width: 95%;
						display: block;
						font-size: 15px;
						font-weight: bold;

						&:hover {
							img      { filter: opacity(.5) }
							p::after { transform: scaleX(1) }
						}
					}

					> ul {
						display: block;
						padding: 0;
						margin: 10px 0 0;
						list-style: none;
						box-sizing: border-box;

						&:before,
						&:after {
							content: "";
							display: table;
						}
						&:after { clear: both }

						> li {
							float: left;
							width: 100%;
							padding: 10px 0;
						}
					}
				}
				&.normal-sub {
					left: auto;
					width: 300px;
					padding: 10px 20px;

					> li {
						width: 100%;

						a {
							border: 0;
							padding: 1em 0;
						}
					}
				}
			}
		}
	}
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and @max-tablet {

	.menu-container { width: 100% }
	.menu-mobile { display: block }
	.menu-dropdown-icon:before { display: block }

	.menu {
		> ul {
			display: none;

			> li {
				float: none;
				display: block;

				a {
					padding: 1.5em;
					width: 100%;
					display: block;
				}

				> ul {
					position: relative;

					&.normal-sub { width: 100% }

					> li {
						float: none;
						width: 100%;
						margin-top: 20px;

						&:first-child { margin: 0 }

						> ul {
							position: relative;

							> li { float: none }
						}
					}
				}
			}
		}
	}
}

<div class="container">

            <a class="navbar-brand" href="#">
                <img src="img/affix-logo.png" alt="">
            </a>

            <!-- Nav links -->
			<div class="menu">
				<ul class="nav navbar-nav">
					<li><a href="#">Мебель</a></li>
					<li><a href="#">Свет</a>
						<ul>
							<li>
								<ul>
									<li>
										<a href="#">
											<img class="img-responsive" src="http://placehold.it/200x200" alt="">
											<P>Лыстры</P>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<ul>
									<li>
										<a href="#">
											<img class="img-responsive" src="http://placehold.it/200x200" alt="">
											<P>Настольные светильники</P>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<ul>
									<li>
										<a href="#">
											<img class="img-responsive" src="http://placehold.it/200x200" alt="">
											<P>Напольные лампы</P>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<ul>
									<li>
										<a href="#">
											<img class="img-responsive" src="http://placehold.it/200x200" alt="">
											<P>Настенные светильники</P>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<ul>
									<li>
										<a href="#">
											<img class="img-responsive" src="http://placehold.it/200x200" alt="">
											<P>Уличный свет</P>
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Диваны и кресла</a></li>
					<li><a href="#">Для дома</a></li>
					<li><a href="#">Аксессуары</a></li>
					<li><a href="#">Вдохновение</a></li>
					<li><a class="sale" href="#">sale</a></li>
				</ul>
			</div>
       		<!-- /.menu -->
        </div>
        <!-- /.container -->