This it the last unordered list menu CSS you will ever have to write.

menu-output.css

.menu {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  list-style: none;
  z-index: 999;
}
.menu li {
  display: inline-block;
}
.menu li a {
  display: block;
}
.menu li ul {
  position: absolute;
  visibility: hidden;
  margin-left: 0;
  opacity: 0;
}
.menu li ul ul {
  margin: -3.4rem 0 0 12rem;
}
.menu li:hover {
  position: static;
  z-index: 9999;
}
.menu li:hover ul {
  opacity: 1;
  visibility: visible;
}
.menu li:hover ul ul,
.menu li:hover ul ul ul,
.menu li:hover ul ul ul ul,
.menu li:hover ul ul ul ul ul {
  opacity: 0;
}
.menu li li {
  display: block;
}
.menu li li a {
  width: 12rem;
}
.menu li li:hover ul {
  opacity: 1;
}
.menu li li li:hover ul {
  opacity: 1;
}
.menu li li li li:hover ul {
  opacity: 1;
}
.menu li li li li li:hover ul {
  opacity: 1;
}

menu-shorthand.less

.menu {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	list-style: none;
	z-index: 999;
	li {
		display: inline-block;
		a {
			display: block;
		}
		ul {
			position: absolute;
			z-index: 999999;
			visibility: hidden;
			margin-left: 0;
			opacity: 0;
			ul {
				margin: -3.4rem 0 0 12rem;
			}
		}
		&:hover {
			position: static;
			z-index: 9999;
			ul {
				opacity: 1;
				visibility: visible;
				ul, ul ul, ul ul ul, ul ul ul ul  {
					opacity: 0;
				}
			}
		}
		li {
			display: block;
			a {
				width: 12rem;
			}
			&:hover {
				ul {
					opacity: 1;
				}
			}
			li {
				&:hover {
					ul {
						opacity: 1;
					}
				}
				li {
					&:hover {
						ul {
							opacity: 1;
						}
					}
					li {
						&:hover {
							ul {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
}