The crucial part of a HTML/CSS drop down is nested lists. The main items are in the top level list ul li
, sub menus are part of ul
elements within the top level ul li
, by default these are hidden-
SO you have the structure:
ul
-li
--ul <-- hidden with display:none
---li <-- hidden due to parent ul being hidden
You can see this in effect in your CSS here:
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none; /* <---- here */
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-decoration: none;
}
When the top level ul li
item is hovered on, you want the child list to be shown, you can see this here:
ul li:hover ul {
display: block; /* <--- here */
opacity: 1;
visibility: visible;
}
Which performs the following:
ul
-li:hover <-- trigger applying display:block to child ul
--ul <-- shown with display:block
---li <-- shown due to parent ul being shown