Now we have to style the second-level items. Well, to be honest, we have already hidden them in the previous section in order to obtain a nice first-level styling, but now we can enrich the second-level elements with plenty of more properties and make sure they show up when users hover the mouse on their first-level parent.
Let's start with the last part we just discussed. In order to display the second-level elements, we have to use the :hover
pseudo-selector:
nav > ul > li > .item:hover + ul, nav > ul > li > ul:hover{ clip: auto; /* temporary property, to be removed */ opacity: 1; }
We have intercepted both the hover on the parent and on all of the children in order to keep the second-level menu displayed even when the mouse moves on them. Once done, we can start with some basic styling:
nav > ul > li > ul{
padding: 0.7em 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: none;
background-color: rgb...