* {margin: 0px; padding: 0px; list-style-type: none;}
div#banner {
    width: 100%; height: 100px;
    background-color: aqua;
}
div#content {
    width: 100%; height: 200%;
    background-color: orange;
}

nav {
    border: 1px solid black;
    background-color: white;
    height: 30px;
    position: sticky;
    top: 0px;
    z-index: 5;
}
nav > ul {
    position: absolute;
    padding: 5px;
}
nav > ul > li {margin: 2px;}
ul > li {float: left;}

li:hover {background-color: lightgray;}

ul#lenses {
    border: 1px solid black;
    background-color: white;
    display: none;
    width: 90px;
    position: absolute;
    left: 67px;
    top: 25px;
    float: left;
    z-index: 6;
    li { 
        margin: 2px; padding: 2px;
        float: left;
    }
}

ul#products {
    background-color: white;
    border: 1px solid black;
    display: none;
    width: 85%;
    position: absolute;
    left: -1px; top: 25px;
    z-index: 7;
    li {
        margin: 2px; padding: 2px;
        float: left;
    }
}

ul > li:hover ul#products {display: block;}
ul > li > ul > li:hover ul#lenses {display: block;}

section {
    article {
        border: 5px solid yellowgreen;
        width: 200px; height: 200px;
        float: left;
        position: relative;
        background-color: blueviolet;
        margin: 20px;
    }
}