Typo3 Fluid Menu (CSS only)

custom.fluidmenu.scss

// Bootstrap + VHS
<div class="row">
      <div class="container">
        <div class="menu col-sm-12">
          <v:page.menu classActive="active" classCurrent="current" classFirst="first" classLast="last" classHasSubpages="hasSubpages" substElementUid="1" pageUid="1" levels="2" useShortcutUid="false" expandAll="1" />
        </div>
      </div>
    </div>


/* SCSS */
.menu {
	background: $rgb_primary;
	@include verticalCenter(50px);
	@include padding(0);
	@include margin(-50px null null null);

	z-index: 999;

	ul {
		list-style-type: none;
		@include margin(0);
		@include padding(0);

		li {
			float: left;
			@include padding(0 20px);

			a {
				display: block;
				width: 100%;
				color: #fff;

				&:hover {
					text-decoration: none;
				}
			}

			&:hover {
				background: $rgb_secondary;

				> ul {
					@include verticalCenter(30px);
					position: absolute;
					display: block;
					background: $rgb_secondary;

					z-index: 889;

					left: 0;
				    right: 0;
				    max-width: 1140px;
				    margin: 0 auto 30px auto;

					li {
						&:hover {
							background: $rgb_primary;
						}
					}
				}
			}

			&.current, &.active.hasSubpages {
				background: #f00 !important;

				> ul {
					@include verticalCenter(30px);
					position: absolute;
					display: block;
					background: #f00;

					z-index: 888;

					left: 0;
				    right: 0;
				    max-width: 1140px;
				    margin: 0 auto 30px auto;

					li {
						&:hover {
							background: #aa0000 !important;
						}

						&.current {
							background: #aa0000 !important; 
						}
					}
				}

			}
		}

		ul {
			display: none;
		}

	}
}