nav ul.menu {
    display: flex;
    flex-direction: row;
    background-color: gray;
}
nav ul.menu > li {
    position: relative;
    cursor: pointer;
}

nav ul.menu a, nav ul.menu span.separator {
    display: block;
    color: black;
    padding: 1em;
}
nav ul.menu > li > ul.nav-child {
    position: absolute;
    z-index: 2000;
    left: 0;
    top: -5000px;
    width: 120%;
    background-color: darkgrey;
}
nav ul.menu > li > ul.nav-child > li > ul.nav-child {
    position: absolute;
    left: -5000px;
    top: 50%;
    width: 120%;
    background-color: lightgrey;
}
nav ul.menu > li > ul.nav-child.hovered, nav ul.menu > li > ul.clicked {
	top: inherit;
}
nav ul.menu > li > ul.nav-child > li > ul.nav-child.hovered, nav ul.menu > li > ul.nav-child > li > ul.clicked {
    left: 100%;
}
nav ul.menu li.current > a, nav ul.menu li.active.parent > a, nav ul.menu li.active.parent > span, nav ul.menu a:hover, nav ul.menu span:hover {
    color: #999;
    background-color: black;
}