Unlimited level Responsive Navigation menu in LESS

responsive-navigation.sublime-snippet

<snippet>
	<content><![CDATA[
${1:.main-menu-navigation} ul {
	font-family: ${2:@heading-font};
	margin-bottom: 0;
	font-size: ${3:20px};
	a {
		&:hover {
			color: ${4:@dark-color};
		}
		&.active {
			color: ${4:@dark-color};
		}
	}
	> li {
		float: left;
		position: relative;
		a {
			color: ${5:@light-text-color};
			text-decoration: none;
			display: inline-block;

			height: 2.5em;
			line-height: 2.5em;
			padding: 0 1em;
			font-weight: ${6:@heavy-font};
		}
		ul {
			display: none;
			ul {
				top: 0;
			}
			li {
				border-bottom: 1px solid lighten(${7:@border-color}, 5%);
				white-space: nowrap;
				display: block;
				float: none;
			}
		}
		&:hover > a {
			color: ${4:@dark-color};
		}
	}
	li:hover > ul {
		display: block;
		position: absolute;
		float: none;
		background: ${8:@white};
		ul {
			right: 100%;
		}
	}
}
]]></content>
	<tabTrigger>navigation</tabTrigger>
	<scope>source.less</scope>
</snippet>