Flyout Menu SCSS mixins

_menu_flyouts.scss

///
//  Flyout Menu CSS (Don't modify below this line!!!)
//
//
//  Use the following code to apply these styles:
//
//    @include flyout-horizontal;
//      -or-
//    @include flyout-vertical;
//
///

//
// expected structure
//
// <div|nav>  -- apply `flyout()` to this
//   <ul>
//     <li>
//       <a|span>
//       <ul>
//         <li>
//           <a|span>
//           <ul>
//             etc.
//

@mixin flyout() {

	ul {
		min-width: 100%;
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

	li {
		position: relative;
	}

	li > a,
	li > span {
		display: block;
	}

	& > ul {
		ul {
			display: none;
		}

		li.item-active > ul,
		li:hover > ul {
			display: block;
		}
	}

}


@mixin flyout-horizontal($z_idx: 20) {
	@include flyout();

	display: block;
	position: relative;
	z-index: $z_idx;

	& > ul {
		& > li {
			float: left;
		}

		ul {
			position: absolute;

			ul {
				position: absolute;
				top: 0px;
				left: 100%;
			}
		}
	}
}


@mixin flyout-vertical($z_idx: 10) {
	@include flyout();

	display: block;
	position: relative;
	z-index: $z_idx;

	& > ul {
		ul {
			position: absolute;
			top: 0px;
			left: 100%;
		}
	}
}